Html内容以PDF格式下载

前端将html内容以PDF格式下载，可以用html2canvas和jsPDF这两个工具结合使用。

html2canvas我们可以理解为截图，但是截图可能和你看到的不一定完全一致，因为它不会制作实际屏幕截图，而是根据页面上的可用信息构建屏幕截图。html2canvas通过读取 DOM 和应用于元素的不同样式，将当前页面呈现为画布图像。html2canvas在读取DOM时，一样会遵守浏览器的同源策略，所以遇到跨域的图片"截图"就不能保证正确。

html2canvas结合jsPDF将Html内容下载为PDF

    html2canvas(document.getElementById('content').then((canvas) => {
      let url = canvas.toDataURL('image/png');
      const pdf = new JsPDF('p', 'pt', 'a4'); // (横竖方向、指定坐标时使用的测量单位、格式)
      pdf.addImage(url, 'PNG', 30, 30, 560, 600); // (资源、文件格式、左右偏移、上下偏移、宽、高)
      pdf.save('name.pdf');
    });

图片（url）以PDF格式下载

拿到图片的url，将图片以PDF格式下载，需要先将图片转成base64格式，在使用jsPDF下载。

  function convertImgToBase64(url, callback, outputFormat) {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.onload = function() {
      canvas.height = img.height;
      canvas.width = img.width;
      ctx!.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL(outputFormat || 'image/png');
      callback.call(this, dataURL);
      canvas = null;
    };
    img.src = url;
  }