在 ReactJS 组件中使用 html2canvas 和 jsPDF 库时,如何解决生成的 PDF 中长表格被截断的问题?

问题描述 投票:0回答:0

我在 ReactJS 组件中使用 html2canvas 和 jsPDF 库将表格导出到 PDF 文件。但是,我遇到了一个问题,即表格太长,无法容纳在单个页面中,导致它被切断并且在生成的 PDF 中不完全可见。

如果表格太长,我想将表格分成多页。

处理导出的函数。

    const pdfRef = useRef()
    
      const exportPDF = () => {
        const input = pdfRef.current;
        html2canvas(input).then((canvas) => {
          const imgData = canvas.toDataURL('image/png')
          const pdf = new jsPDF('l', 'mm', 'a4', true);
          const pdfWidth = pdf.internal.pageSize.getWidth();
          const pdfHeight = pdf.internal.pageSize.getHeight();
          const imgWidth = canvas.width;
          const imgHeight = canvas.height;
          const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);
          const imgX = (pdfWidth - imgWidth * ratio) / 2;
          const imgY = 0;
          pdf.addImage(imgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio);
          pdf.save('peerss-employees.pdf')
        })
      }

我收到的PDF被第8行截断了,但实际上有23行:

javascript reactjs jspdf html2canvas
© www.soinside.com 2019 - 2024. All rights reserved.