vue 纯前端把部分页面生成图片并下载保存本地-一一网

需求：制作名片并把名片导出下载到本地

首先想到的是如何把部分页面内容转换为图片，经过查询文档发现html2canvas这个插件可以实现该功能

解决步骤：

1.安装html2canvas
官方文档可以参考html2canvas

引入方式：

npm install –save html2canvas

或者：

yarn add html2canvas

2..将html2canvas引入到组件中

该插件安装完毕后，在你需要使用的vue组件中，按照以下方式，将插件引入：

import html2canvas from “html2canvas”
3.将制定区域内转成图片
首先，你需要让html2canvas获取到你想要转换的节点内容，因此，你需要添加ref标记。
示例如下（必须把想要导出的内容放到ref的div里）：

   <div class="scan-card-container" ref="imageWrapper">
        <div class="scan-card">
          <div class="header">
            <img :src="https://juejin.cn/post/`${logoUrl}?${new Date().getTime()}`"
                 class="logo-img"
                 crossOrigin="anonymous"
            >
            <img :src="https://juejin.cn/post/`${avatarUrl}?${new Date().getTime()}`"
                 class="img-avatar"
                 crossOrigin="anonymous"
            >
          </div>
        </div>
      </div>
复制代码

完整代码

html

  <div  class="scan-card-container" ref="imageWrapper">
        <div class="scan-card">
          <div class="header">
            <img :src="https://juejin.cn/post/`${logoUrl}?${new Date().getTime()}`"
                 class="logo-img"
                 crossOrigin="anonymous"
            >
            <img :src="https://juejin.cn/post/`${avatarUrl}?${new Date().getTime()}`"
                 class="img-avatar"
                 crossOrigin="anonymous"
            >
          </div>
          <div class="card-info">
            <div class="card-name">
              {{ form.name }}
            </div>
            <div>
              {{ form.post }}
            </div>
            <div class="line" />
            <div>
              {{ form.address }}
            </div>
            <div class="card-phone">
              {{ form.phone }}
            </div>
            <div class="qr-code" id="qrCodeCard" ref="qrCodeCardUrl" />
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="onExport"  id="onExport">
          导出
        </el-button>
      </div>
复制代码

script


import html2canvas from 'html2canvas';

  onExport() {
        const clientWidth = this.$refs.imageWrapper.offsetWidth;
      const clientHeight = this.$refs.imageWrapper.offsetHeight;
      const kh = [clientWidth, clientHeight];

      html2canvas(this.$refs.imageWrapper, { useCORS: true, logging: true }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        this.download(dataURL, kh);
      });
    },
     getUrlBase64(url, kh) {
      return new Promise((resolve) => {
        let canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.crossOrigin = 'Anonymous'; // 允许跨域
        img.src = url;
        img.onload = () => {
          // eslint-disable-next-line prefer-destructuring
          canvas.height = kh[1];
          // eslint-disable-next-line prefer-destructuring
          canvas.width = kh[0];
          ctx.drawImage(img, 0, 0, kh[0], kh[1]);
          const dataURL = canvas.toDataURL('image/png');
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    download(imgUrl, kh) {
      this.getUrlBase64(imgUrl, kh).then((base64) => {
        const link = document.createElement('a');
        link.href = base64;
        link.download = `${this.currentRobot.nickname}名片.png`;
        link.click();
      });
    },
复制代码

建议

生成的图片背景默认为白色，可以通过backgroundColor属性修改背景颜色，使用如下：

 html2canvas(this.$refs.imageDom, {
        backgroundColor: null // null 表示设置背景为透明色
      })
复制代码

开发过程中遇到的坑
1.图片是远程服务器的，展示没有问题但是导出的话会出现图片不显示。
解决办法：

 html2canvas(this.$refs.imageWrapper ).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        this.download(dataURL, kh);
      });
      
复制代码

加上{ useCORS: true, logging: true }变成：

html2canvas(this.$refs.imageWrapper, { useCORS: true, logging: true }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        this.download(dataURL, kh);
      });
复制代码

然后给图片的src加上动态的时间，并加上crossOrigin=”anonymous”允许跨域

<img :src="https://juejin.cn/post/`${avatarUrl}?${new Date().getTime()}`"
                 class="img-avatar"
                 crossOrigin="anonymous"
            >
复制代码

2.有些css的样式不能识别，比如box-shadow，（具体可查看文档）

1624005407(1).png
目前不支持这些 CSS 属性