效果图:

步骤:

1.先安装html2canvas

 npm install --save html2canvas

注意:我这里报错:npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https://registry.npmjs.org/html2canvas failed, reason: connect ETIMEDOUT 104.16.18.35:443

解决办法:

npm install jspdf.debug --registry=https://registry.npm.taobao.org

2.在需要的地方导入import html2canvas from "html2canvas";

3.代码:

 //导出
    createPicture() {
      html2canvas(document.body, {
        backgroundColor: null
      }).then(canvas => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData);
      });
    },
    //下载图片
    fileDownload(downloadUrl) {
      let aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = downloadUrl;
      aLink.download = "监控详情.png";
      // 触发点击-然后移除
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    }

 

Logo

前往低代码交流专区

更多推荐