vue - html2canvas 将页面保存为图片后下载

第一步: 下载 html2canvas 插件

npm install html2canvas –save

第二步: 在需要实现下载功能的页面中引入

import html2canvas from "html2canvas"

第三步: 给需要下载的元素 添加 ref

<div ref="imageWrapper">xxxx内容</div>

第四步: 下载按钮添加事件

<el-button type="primary" @click="handleDownload">下载</el-button>

第五步: 下载功能实现

handleDownload() {
  /** 生成图片*/
  html2canvas(this.$refs.imageWrapper).then(canvas => {
    let dataURL = canvas.toDataURL("image/png");
    if (dataURL !== "") {
      /** 下载图片*/
      let alink = document.createElement("a");
      alink.href = dataURL;
      alink.download = "downloadName.png";
      alink.click();
    }
  });
},