使用 html2canvas 和 jsPDF 生成的 PDF 中表格列中的文本被截断 – 如何启用自动换行？

Question

我使用 html2canvas 和 jsPDF 来生成 PDF。下载的 PDF 应该看起来像文档的预览，但我遇到了表格布局问题。具体来说，表格列中的文本未正确换行，导致内容被截断，并且我无法看到这些列中的全文。我附上了表格的图片以供参考。如何解决此问题以确保文本在列中正确换行？

查看图片这里

这是代码：

export const downloadComponentAsPDF = async (elementId, fileName) => {
  const contentArea = document.getElementById(elementId);

  if (contentArea) {
    try {
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'pt',
        format: 'a4',
      });

      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = pdf.internal.pageSize.getHeight();
      const margin = 20;
      const elementMargin = 10;
      let positionY = margin;
      let currentPageHeight = pdfHeight - 2 * margin;

      // Group sections into rows based on layout
      const rows = [];
      let currentRow = [];
      let currentRowWidth = 0;

      const sections = Array.from(
        contentArea.querySelectorAll('.section, .non-section'),
      );

      sections.forEach(section => {
        const sectionWidth = parseInt(
          section.getAttribute('data-width') || '12',
        );

        if (currentRowWidth + sectionWidth > 12) {
          rows.push(currentRow);
          currentRow = [];
          currentRowWidth = 0;
        }

        currentRow.push(section);
        currentRowWidth += sectionWidth;
      });

      if (currentRow.length > 0) {
        rows.push(currentRow);
      }

      // Process each row and its sections in order
      for (const row of rows) {
        let rowHeight = 0;
        const rowSections = [];

        // Render sections in the current row
        for (const section of row) {
          const sectionWidth = parseInt(
            section.getAttribute('data-width') || '12',
          );
          const sectionCanvas = await html2canvas(section, {
            scale: 4,
            useCORS: true,
          });

          const imgData = sectionCanvas.toDataURL('image/png');
          const imgWidth = sectionCanvas.width;
          const imgHeight = sectionCanvas.height;

          const pdfImgWidth = (sectionWidth / 12) * (pdfWidth - 2 * margin);
          const pdfImgHeight = (pdfImgWidth * imgHeight) / imgWidth;

          rowHeight = Math.max(rowHeight, pdfImgHeight);
          rowSections.push({
            imgData,
            pdfImgWidth,
            pdfImgHeight,
            sectionWidth,
          });
        }

        // If row height exceeds current page height, create a new page
        if (positionY + rowHeight > currentPageHeight) {
          pdf.addPage();
          positionY = margin;
          currentPageHeight = pdfHeight - 2 * margin;
        }

        // Render the row in the PDF
        let positionX = margin;
        for (const rowSection of rowSections) {
          pdf.addImage(
            rowSection.imgData,
            'PNG',
            positionX,
            positionY,
            rowSection.pdfImgWidth,
            rowHeight,
          );

          positionX += rowSection.pdfImgWidth + elementMargin;
        }

        positionY += rowHeight + elementMargin;
        currentPageHeight -= rowHeight + elementMargin;
      }

      pdf.save(`${fileName}.pdf`);
    } catch (error) {
      console.error('Error generating PDF:', error);
    }
  }
};

下图显示了表格列在预期结果中的外观。
检查图片这里

Answer 1

HTML 到画布是到像素的转换。因此图像没有任何自动换行。

存在单词像素，但它们只是像素扫描线的一部分，该像素扫描线以图像的全宽度包裹一行像素。

同样，PDF（以及 jsPDF）没有换行的概念，也没有表格间距的概念。

您可以尝试按设置分割行

maxWidth

，如此处所示生成的PDF中的自动换行（使用jsPDF）？

有一个名为 jsPDF-AutoTable 的插件，可以将 HTML js 数据准备为非包装 PDF 转换可接受的格式。请参阅https://github.com/JonatanPe/jsPDF-AutoTable