前端生成pdf之html2canvas+jsPDF，以及解决图片不显示bug

html2canvas 和 jsPDF 是用于在前端生成 PDF 文件的两个常用库。如果在使用过程中遇到图片不显示的问题，可能是因为图片跨域问题或图片还未加载完成。

解决方法：

1. 确保图片资源允许跨域访问。如果图片存储在不同的域上，服务器需要设置允许跨域资源共享（CORS）。
2. 确保图片在生成 PDF 前已完全加载。可以在生成 PDF 前使用 html2canvas 的 onclone 选项来等待图片加载完成。

示例代码：

html2canvas(document.body, {
  onclone: function(document) {
    // 等待图片加载完成
    const images = document.querySelectorAll('img');
    Promise.all(Array.from(images).map(image => new Promise((resolve, reject) => {
      if (image.complete) {
        resolve();
      } else {
        image.onload = () => resolve();
        image.onerror = () => reject();
      }
    }))).then(() => {
      // 图片已加载完成，生成 PDF
      const canvas = document.querySelector('canvas');
      const img = canvas.toDataURL('image/png');
      const doc = new jsPDF();
      doc.addImage(img, 'JPEG', 0, 0, canvas.width, canvas.height);
      doc.save('download.pdf');
    }).catch(err => {
      console.error('Error generating PDF:', err);
    });
  }
});

在这个示例中，onclone 回调函数会被调用来处理原始 DOM 的副本。在这个函数内部，我们检查所有的图片是否已经加载完成，并且等待它们全部加载完成后，再生成 PDF 文件。如果图片加载失败，则捕获错误并在控制台输出错误信息。