html2Canvas jsPDF 实现导出PDF文件

jsPDF官网
html2Canvas官网

<div id="canvas_pdf">
	我是一段话
</div>

import html2canvas from 'html2canvas';
import {
    
     jsPDF } from 'jspdf';

	const _this = this;
    const canvas_pdf = document.getElementById('canvas_pdf');
    canvas_pdf.style.background = '#FFFFFF';
    const contentWidth = canvas_pdf.scrollWidth;
    const contentHeight = canvas_pdf.scrollHeight;
    //一页pdf显示html页面生成的canvas高度;
    const 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;
    console.log(contentHeight)
    html2canvas(canvas_pdf, {
    
    
      width: contentWidth,
      height: contentHeight,
      scrollY: -canvas_pdf.scrollTop,
      useCORS: _this.images.length ? true : true, // Whether to attempt to load images from a server using CORS
    }).then(function (canvas) {
    
    
      document.body.appendChild(canvas);
      const pageData = canvas.toDataURL('image/jpeg', 1); // 将canvas转换成img的src流
      // console.log("base64编码数据：", imgUrl);
      // _this.url = pageData
      var 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('content.pdf');
    });