利用html2canvas下载图片(全前端处理)

       html2canvas 是一款JavaScript 插件，它能够将网页上的HTMIL元素转化为Canvas 对象，从而可以将网页截图输出为图片或者 PDF文件。它的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象，并叠加到一起形成一张完整的图片或者 PDF 文件。
       html2canvas的转化过程分为三步。首先，它会遍历DOM树，根据每个元素的位置、大小、颜色、边框等属性，生成对应的 Canvas对象;其次，它会将这些Canvas 对象按照z-index 值从小到大依次叠加在一起，形成一张完整的图片;最后，它会将图片输出为指定格式的文件。

      首先在我们的项目中安装html2canvas库

npm install html2canvas --save

 下面是具体的实现代码

<button @click="download">下载下方截图图片</button>
 <div ref="html2canvasRef">
   <h1>html2canvasRef所包裹的区域就是所下载的图片</h1>
   <h2>html2canvasRef所包裹的区域就是所下载的图片</h2>
 </div>

function download() {
  html2canvas(this.$refs["html2canvasRef"]).then((canvas) => {
    let dataURL = canvas.toDataURL("image/png"); //base64格式的图片 url
    // 创建a标签下载图片
    var addElement = document.createElement('a')
    addElement.href = dataURL
    addElement.download = "下载.png" //设置下载的图片名称
    
    document.body.appendChild(addElement)
    addElement.click();
    document.body.removeChild(addElement);
  });
}

也可以将base64格式的图片转化成file或blob格式的图片，兼容性更好。代码如下：

function download() {
  html2canvas(this.$refs["html2canvasRef"]).then((canvas) => {
    let dataURL = canvas.toDataURL("image/png"); //base64格式的图片 url
    const blobUrl = this.dataURLtoBlob(dataURL); //转化成blob格式的图片 Blob{size:xx,type:xx}
    var fileUrl = URL.createObjectURL(blobUrl); //URL.createObjectURL()创建一个指向File或Blob对象的URL。这个URL可以被用于指定一个HTML标签的href属性

    // 创建a标签下载图片
    var addElement = document.createElement('a')
    addElement.href = fileUrl
    addElement.download = "下载.png"
    
    document.body.appendChild(addElement)
    addElement.click();
    document.body.removeChild(addElement);
  });
}

function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(','); //分割为数组，分割到第一个逗号
  let bstr = window.atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: "png" });
}

链接:转为PDF 相关链接

前台导出pdf经验汇总 （html2canvas.js和浏览器自带的打印功能-print.js）以及后台一些导出pdf的方法_canvas 导出pdf_Schafferyy的博客-CSDN博客