前端：jspdf和html2canvas实现html内容导出为pdf，页面大小为A4，且可能出现分页情况

May

问： html内容导出为pdf，页面大小为A4，且可能出现分页情况

chatGPT答：

为了实现这个需求，需要使用一些JavaScript库和第三方工具。以下是一个可能的实现方法：

将页面导出为PDF，可以使用jsPDF或pdfmake等JavaScript库来实现此功能。
将HTML页面的内容转换为PDF格式。可以使用html2canvas等JavaScript库来实现此功能。
调整PDF页面的大小以适应A4纸张，并设置分页选项。可以使用pdfmake等JavaScript库来实现此功能。
将生成的PDF文件提供给用户进行下载。可以使用FileSaver.js等JavaScript库来实现此功能。

下面是一个基本的实现示例：

// 引入所需的 JavaScript 库
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import FileSaver from 'file-saver';
// 注册 PDF 字体
pdfMake.vfs = pdfFonts.pdfMake.vfs;
// 获取导出按钮元素
const exportButton = document.querySelector('#export-button');
// 添加点击事件处理程序
exportButton.addEventListener('click', () => {
  // 获取 HTML 页面的内容
  const content = document.querySelector('#content');
  // 将 HTML 内容转换为 canvas 元素
  html2canvas(content, { scrollY: -window.scrollY }).then(canvas => {
    // 将 canvas 元素转换为 JPEG 图像数据
    const imageData = canvas.toDataURL('image/jpeg');
    // 计算 PDF 页面的大小
    const pageSize = { width: 595, height: 842 }; // A4 大小，单位为像素
    const pageAspectRatio = pageSize.width / pageSize.height;
    const imageAspectRatio = canvas.width / canvas.height;
    const scaleFactor = imageAspectRatio > pageAspectRatio
      ? pageSize.width / canvas.width
      : pageSize.height / canvas.height;
    const scaledWidth = canvas.width * scaleFactor;
    const scaledHeight = canvas.height * scaleFactor;
    // 将 JPEG 图像数据转换为 PDF 文档
    const docDefinition = {
      content: [
        { image: imageData, width: scaledWidth, height: scaledHeight },
 8     ],
      pageSize: { width: pageSize.width, height: pageSize.height },
      pageBreakBefore: (index, node) => index > 0 && node.pageNumbers !== false,
      pageMargins: [0, 0, 0, 0],
    const pdfDocGenerator = pdfMake.createPdf(docDefinition);
    // 下载 PDF 文件
    pdfDocGenerator.getBlob(blob => {
      FileSaver.saveAs(blob, 'export.pdf');
/*********上面是chatGPT给的答案，下面是我原来的实现**********/
import jspdf from "jspdf";
import html2canvas from "html2canvas";
const toPdf = () => {
    let domHeight = contentBox.value.offsetHeight;
    let maxHeight = 64257;
    html2canvas(contentBox.value, {
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        scale: (maxHeight/domHeight) > 1 ? 1: (maxHeight/domHeight)
    }).then((canvas) => {
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        let pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28; // A4 宽度
        var imgHeight = 592.28/contentWidth * contentHeight; // A4总高度
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jspdf('', 'pt', 'a4');
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 10, 0, imgWidth-20, imgHeight );
        } else {
            while(leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 10, position, imgWidth-20, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if(leftHeight > 0) {
                    pdf.addPage();