2021-12-03 react+html2canvas页面转为图片或者pdf

最新推荐文章于 2025-04-09 14:51:07 发布

原创最新推荐文章于 2025-04-09 14:51:07 发布 · 696 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

常见问题专栏收录该内容

12 篇文章

订阅专栏

这段代码展示了如何将HTML页面转换为PDF文件。它首先使用html2canvas获取页面元素的canvas，然后利用jsPDF库创建PDF，并将canvas内容分页添加到PDF中，最后保存为PDF文件。

页面点击按钮点击出发dowanload函数

const download = () => {
    const element: HTMLElement = document.getElementById('demo'); // 需要导出的pdf页面
    html2canvas(element, {
      allowTaint: true,
      useCORS: true,
    }).then((canvas) => {
      const dataImg = new Image();
      dataImg.src = canvas.toDataURL('image/png');
      // FileSaver.saveAs(`${dataImg.src}`, `11.jpg`);
      // message.success('下载中...', 1);
      这两句是转化为图片下载下来
      const pdf = new jsPDF('p', 'pt', 'a4');
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;
      const pageHeight = (contentWidth / 592.28) * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      const imgWidth = 595.28;
      const imhHeight = (592.28 / contentWidth) * contentHeight;
      if (leftHeight < pageHeight) {
        pdf.addImage(dataImg.src, 'JPEG', 0, position, imgWidth, imhHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(dataImg.src, 'JPEG', 0, position, imgWidth, imhHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save('ss.pdf');
    });
  };