html2pdf的使用与html2Canvas+jspdf长图不分页

Wendy_U

已于 2023-01-17 10:56:09 修改

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript react 文章标签： javascript 前端 react

于 2023-01-17 10:54:02 首次发布

本文链接：https://blog.youkuaiyun.com/Wendy_U/article/details/128713081

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

react

5 篇文章

订阅专栏

文章介绍了如何使用html2pdf.js库生成PDF，以及当需要处理长图不分页时，结合html2Canvas和jspdf.js进行转换的方法。通过设置特定参数和调整图片尺寸，确保长图能在单页PDF中完整显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html2pdf的使用

html2pdf在https://github.com/eKoopmans/html2pdf.js说明的很清楚了，下面给出一个例子

const handleDownload = () => {
    let element = document.getElementById('elementToPrint');
    let opt = {
      margin: 0,
      filename: `${title}-${name}-${reportDate.replace(/-/g, '.')}.pdf`,
      image: { type: 'jpeg', quality: 1 },
      html2canvas: {
        scale: 2,
        allowTaint: false,
        useCORS: true,
        ignoreElements: (element: { id: string }) => {
          if (element.id === 'ignoreBtnElement') return true;
          return false;
        },
      },
      pagebreak: { mode: 'avoid-all', after: '#levelAnalysis' }, 
      enableLinks: true, // 支持文本中放链接，可点击跳转
    };
    html2pdf().set(opt).from(element).save();
  };

html2Canvas+jspdf.js实现长图不分页

html2pdf不能实现在一页输出长图，与产品需求不符，故使用

  const handleDownload = () => {
    let element = document.getElementById('elementToPrint');
    if (element) {
      let width = element.offsetWidth / 4;
      let height = element.offsetHeight / 4;
      let limit = 14400;
      if (height > limit) {
        let contentScale = limit / height;
        height = limit;
        width *= contentScale;
      }
      html2canvas(element, {
        scale: 2,
        useCORS: true,
        allowTaint: false,
        ignoreElements: (element: { id: string }) => {
          if (element.id === 'ignoreBtnElement') return true;
          return false;
        }
      }).then(canvas => {
        let context: any = canvas.getContext('2d');
        let orientation;
        if (context) {
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
        }
        let pageData = canvas.toDataURL('image/jpg', 1.0);
        let img = new Image();
        img.src = pageData;
        img.onload = function () {
          img.width /= 2;
          img.height /= 2;
          img.style.transform = 'scale(0.5)';
          let pdf;
          orientation = width > height ? 'l' : 'p'
          // eslint-disable-next-line
          pdf = new jsPDF(orientation , 'mm', [
            width,
            height
          ]);
          pdf.addImage(
            pageData,
            'jpeg',
            0,
            0,
            width,
            height
          );
          pdf.save(`${originTitle}-${name}-${reportDate.replace(/-/g, '.')}.pdf`);
        };
      });
    }
  };