(html2canvas jspdf)html转pdf带分页

1、下载npm包

npm i html2canvas jspdf -s

2、页面引入

     import html2canvas from 'html2canvas';

      import jsPDF from 'jspdf';

3、页面加载完成时调用函数

 // 生成pdf

  const getPdf = () => {

    html2canvas(document.getElementById(`canvas`), {

      scale: 2, // 提升画面质量，但是会增加文件大小

    }).then(function (canvas) {

      const contentWidth = canvas.width;

      const contentHeight = canvas.height;

      //一页pdf显示html页面生成的canvas高度;

      var pageHeight = (contentWidth / 592.28) * 841.89;

      //未生成pdf的html页面高度

      let leftHeight = contentHeight;

      //页面偏移

      let position = 0;

      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

      const imgWidth = 595.28;

      const imgHeight = (592.28 / contentWidth) * contentHeight;

      const pageData = canvas.toDataURL('image/jpeg', 1.0);

      const pdf = new jsPDF('', 'pt', 'a4');

      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

      //当内容未超过pdf一页显示的范围，无需分页

      if (leftHeight < pageHeight) {

        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);

      } else {

        while (leftHeight > 0) {

          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);

          leftHeight -= pageHeight;

          position -= 841.89;

          //避免添加空白页

          if (leftHeight > 0) {

            pdf.addPage();

          }

        }

      }

      pdf.save(`${sessionStorage.getItem('name')}.pdf`);

    });

  };