vue 项目 html2canvas,JSZip,FileSaver 下载图片

将html里面的dom转化为图片

 <template>
  <div class="m-item" ref="imageTofile">
  ...
  </div>
 </template>
 <script>
 import html2canvas from 'html2canvas';
 ...

  // 页面元素转图片
  toImage() {
    // 手动创建一个 canvas 标签
    const canvas = document.createElement('canvas');
    // 获取父标签，意思是这个标签内的 DOM 元素生成图片
    // imageTofile是给截图范围内的父级元素自定义的ref名称
    let canvasBox = this.$refs.imageTofile as HTMLElement;
    // 获取父级的宽高
    if (canvasBox) {
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2.1;
      canvas.height = height * 2.1;
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      const context = canvas.getContext('2d');
      if (context) {
        context.scale(2, 2);
        const options = {
          backgroundColor: null,
          canvas: canvas,
          useCORS: true,
        };

       return html2canvas(canvasBox, options).then((canvas) => {
          // toDataURL 图片格式转成 base64
          let dataURL = canvas.toDataURL('image/png');
          return this.downloadImage(dataURL);
        });
      }
    }
  }

  //下载图片
  downloadImage(url: string) {
    // 如果是在网页中可以直接创建一个 a 标签直接下载
    // let a = document.createElement('a');
    // a.href = url;
    // a.download = `${this.item.userName}-${this.item.roomNumber}-${this.item.date}`;
    // a.click();
    return {
      url,
      name:`${this.item.roomNumber}-${this.item.userName}-${this.item.date}`
    }
  }
 
 // 上面是获取图片base64的url方法
// 下面是根据多个组件来获取对应的 文件数据信息

type imageType = {
  url: string;
  name: string;
}

  async handleDownloadImage () {
    const list = this.$refs.rooms as MRoomItem[]

    const result: Promise<imageType>[] = []

    list.forEach((item) => {
      const value = item.toImage()
      if (value) {
        result.push(value)
      }
    })
    const allResult = await Promise.all(result)
    console.log(allResult)

    const zip = new JSZip()
    /** 创建 zipName 文件夹 */
    const fileFolder = zip.folder('文件夹')
    const fileList = []
    allResult.forEach((item) => {
      fileFolder?.file(`${item.name}.png`, item.url.substring(22), {
        base64: true
      })
    })
    zip.generateAsync({type: 'blob'}).then((res=>{
      FileSaver.saveAs(res,'打包.zip')
    }))
  }
 </script>