获取 div 快照

vue通过 html2canvas 来获取div快照

1、下载依赖：npm install html2canvas

2、引入html2canvas

import html2canvas from 'html2canvas'

3、图片转换格式的方法

dataURLToBlob(url) {
  let arr = url.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
},

4、下载图片

downPic(dom, imgName) {
  let dom = this.$refs[dom];
  let a = document.createElement("a");
  html2canvas(dom).then((canvas) => {
    let dom = document.body.appendChild(canvas);
    dom.style.display = "none";
    a.style.display = "none";
    document.body.removeChild(dom);
    let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
    //这块是保存图片操作  可以设置保存的图片的信息
    a.setAttribute("href", URL.createObjectURL(blob)); 
    a.setAttribute("download", imgName + ".png");
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(blob);
    document.body.removeChild(a);
  });
},

5、调用 this.screenshot(dom节点，保存图片名称)就可以使用啦。