foster-pc-vue/src/utils/html2Canvas.js

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

function printPdf(title) {
  html2Canvas(document.querySelector("#pdfDom"), {
    //获取文档中 id="pdfDom" 的元素,返回匹配指定选择器的第一个元素
    allowTaint: true, //允许跨源图像污染画布
  }).then(function (canvas) {
    let contentWidth = canvas.width; // 获得容器的宽
    let contentHeight = canvas.height; // 获得容器的高
    //一页pdf显示html页面生成的canvas高度;
    let pageHeight = (contentWidth / 592.28) * 841.89;
    let leftHeight = contentHeight; //未生成pdf的html页面高度
    let position = 0; //页面偏移
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 595.28;
    let imgHeight = (592.28 / contentWidth) * contentHeight;
    //图片格式,(0-1,数字越大，代表导出的图片越清晰,默认值：0.92)
    let pageData = canvas.toDataURL("image/jpeg", 1.0);
    //第一个参数: l：横向  p：纵向
    //第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
    //格式，默认为“a4”,如果想用自己的格式例如[595.28, 841.89]
    let 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 > 1) {
        //   PDF.addPage()
        // }
      }
    }
    // 导出pdf文件命名
    PDF.save(title + ".pdf");
  });
}

export default printPdf