html2canvas的使用以及跨域问题

html2canvas的使用

1、安装html2canas

yarn add html2canvas

2、使用html2canvas

<!-- 业务逻辑的原因，我这里使用的富文本字符串 -->
<div  class="container" ref="imageDom">
	<div v-html="contentToImg"></div>
</div>

引入html2canvas

  import html2canvas from "html2canvas"

// 生成图片
      toImg(content) {
        this.contentToImg = content
        this.$nextTick(() => {
          html2canvas(this.$refs.imageDom,{
            useCORS: true, // 跨域
            dpi: window.devicePixelRatio * 4,
            scale: 2,
          }).then(canvas => {
            // 转成图片，生成base64图片地址
            this.imgUrl = canvas.toDataURL("image/png");
            console.log(this.imgUrl);
            this.downloadFile(this.title,this.imgUrl)

          });
        })
      },
      //下载到本地
      downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);
 
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
 
        // aLink.dispatchEvent(evt);
        aLink.click()
      },
      //base64转blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
 
        let uInt8Array = new Uint8Array(rawLength);
 
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      },

跨域问题

1. 前端使用useCORS: true配置项
2. 后端Nginx服务器配置

add_header  'Access-Control-Allow-Origin' '*';
add_header  'Access-Control-Allow-Headers' '*';
add_header  'Access-Control-Allow-Credentials' 'true';
add_header  'Access-Control-Allow-Methods' '*';

这样就大功告成了💯

---

自己在使用的时候看到网上说不用Nginx服务器配置跨域，前端独自解决。可以在img标签上添加crossOrigin属性和给url添加时间戳的形式来解决跨域，

<img
      :src="src+ '?' + new Date().getTime()"
      alt=""
      crossOrigin="anonymous"
    />

但是我在使用的时候并没有成功，有成功的小伙伴评论区来交流一下哦~