html2canvas与jsPDF导入异常及导出可缩放图表PDF截断问题求助

一、解决html2canvas和jsPDF无法正常导入的问题 #

• 先确认依赖安装到位：

  npm install html2canvas jspdf --save
  

• 在组件里正确引入：

  import html2canvas from 'html2canvas';
  import jsPDF from 'jspdf';
  

• 要是用CDN方式，直接在HTML里加脚本：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  

二、解决图表导出PDF被截断、出现黑线的问题 #

你当前代码是把整个内容转成一张大图后分页，一旦图表高度超单页就会截断。可以调整分页逻辑，同时优化截图和PDF生成的配置，避免内容破损：

修改后的完整代码 #

const printDocument = () => {
    enqueueSnackbar('Downloading pdf...', {
      variant: 'success',
      autoHideDuration: 5000,
    });
    const input = document.getElementById('divToPrint1');
    // A4纵向页面尺寸，预留边距避免内容贴边
    const pdfPageWidth = 210;
    const pdfPageHeight = 297;
    const pageMargin = 10;
    const usableWidth = pdfPageWidth - 2 * pageMargin;
    const usableHeight = pdfPageHeight - 2 * pageMargin;

    // 按PDF可用宽度计算缩放比例，确保内容横向适配
    const scaleRatio = usableWidth / input.offsetWidth;
    const scaledContentHeight = input.offsetHeight * scaleRatio;

    html2canvas(input, {
      scale: 2, // 提升截图分辨率，避免PDF模糊
      useCORS: true // 处理图表里可能的跨域图片问题
    }).then(canvas => {
      const imgWidth = usableWidth;
      const imgTotalHeight = (canvas.height * imgWidth) / canvas.width;
      let remainingHeight = imgTotalHeight;
      let yPosition = pageMargin;

      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('portrait', 'mm', 'a4');

      // 生成第一页
      pdf.addImage(imgData, 'PNG', pageMargin, yPosition, imgWidth, Math.min(imgTotalHeight, usableHeight));
      remainingHeight -= usableHeight;

      // 循环生成后续分页
      while (remainingHeight > 0) {
        yPosition = pageMargin - remainingHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', pageMargin, yPosition, imgWidth, Math.min(remainingHeight, usableHeight));
        remainingHeight -= usableHeight;
      }

      pdf.save('download.pdf');
    });
  };

核心优化说明 #

• 加了页面边距，避免内容紧贴页面边缘导致截断
• 提高截图的scale值，解决PDF导出模糊的问题
• 用Math.min控制每页显示的最大高度，防止跨页时出现黑线截断
• 改用PNG格式导出，相比JPEG能保留图表的清晰度，避免压缩失真
• 新增useCORS配置，处理图表中可能存在的跨域图片加载失败问题

额外适配建议 #

既然图表支持调整尺寸，导出前可以先把容器宽度调整为usableWidth / scaleRatio，让图表先适配PDF页面的宽度，再执行导出操作，进一步避免横向内容超出范围。

内容的提问来源于stack exchange，提问作者Rana Faraz