vue转PDF（html2canvas、JSPDF ）网络图片跨域在PDF文件上不显示

问题

vue界面使用html2canvas及JSPDF将界面下载存为PDF文件时，网络界面在vue界面上显示正常，但是将界面存为PDF后图片就不显示了，控制台提示图片跨域。

解决

将网络图片地址转为base64即可。

代码

<img :src="imgUrl" />

data() {
  return {
    imgUrl:""
  }
},
created() {
  this.getBase64Image(网络地址, (dataURL) => {
    this.imgUrl= dataURL;
  });
}
methods:{
  // 解决图片跨域
  getBase64Image(url, callback) {
    var image = new Image();
    image.src = url + "?v=" + Math.random(); // 处理缓存
    image.crossOrigin = "*"; // 支持跨域图片
    image.onload = () => {
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0, image.width, image.height);
      const ndata = canvas.toDataURL("image/jpeg", 1.0);
      callback ? callback(ndata) : null;
    }
  }
}