ssti-CollegeManage/src/components/tool/pdf.js

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

export const downloadPDF = page => {
console.log(444);

  html2canvas(page).then(function(canvas) {
    canvas2PDF(canvas);
  });
};
const canvas2PDF = canvas => {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
      // 一页pdf显示html页面生成的canvas高度;
    let pageHeight = contentWidth / 592.28 * 841.89 ;
    // let pageHeight = 841.89;

      // 未生成pdf的html页面高度
    let leftHeight = contentHeight;
      // 页面偏移
    let position = 0;
      // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
    let imgWidth = 592.28;
    let imgHeight = 592.28 / contentWidth * contentHeight;
    // let imgHeight = 841.89;

    let pageData = canvas.toDataURL('image/jpeg', 1.0);
    let PDF = new jsPDF('', 'pt', 'a4');
    // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
    // 当内容未超过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('测试' + '.pdf')








  // let contentWidth = canvas.width;
  // let contentHeight = canvas.height;
  // console.log(contentWidth,contentHeight);
  // let imgHeight = contentHeight;
  // let imgWidth = contentWidth/2;

  // // 第一个参数： l：横向  p：纵向
  // // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
  // let pdf = new jsPDF('l', 'pt', 'a4');

  // pdf.addImage(
  //   canvas.toDataURL("image/jpeg", 1.0),
  //   "JPEG",
  //   0,
  //   0,
  //   imgWidth,
  //   imgHeight
  // );
  // pdf.save("导出.pdf");
};