生成的 PDF 中的自动换行（使用 jsPDF）？答案

【问题标题】：Word wrap in generated PDF (using jsPDF)?生成的 PDF 中的自动换行（使用 jsPDF）？
【发布时间】：2014-08-07 22:51:44
【问题描述】：

我正在做的是使用 jsPDF 创建我生成的图形的 PDF。但是，我不确定如何包装标题（使用 text() 函数添加）。标题的长度因图表而异。目前，我的标题已超出页面。任何帮助将不胜感激！

这是我目前的代码：

var doc = new jsPDF();
doc.setFontSize(18);
doc.text(15, 15, reportTitle);
doc.addImage(outputURL, 'JPEG', 15, 40, 180, 100);
doc.save(reportTitle);

没有什么可以防止报告标题离开页面

【问题讨论】：

欢迎来到 SO！您应该稍微扩展您的问题 - 向我们展示您尝试了什么，您的预期结果是什么，以及您实际得到了什么。
我添加了一些我用来创建文档的代码。正如我所说，有时reportTitle 太长并且超出了PDF 的右侧。相反，我想让它以某种方式包装。

标签： jspdf

【解决方案1】：

好的，我已经解决了。我使用了 jsPDF 函数 splitTextToSize(text, maxlen, options)。该函数返回一个字符串数组。幸运的是，用于写入文档的 jsPDF text() 函数接受字符串和字符串数组。

var splitTitle = doc.splitTextToSize(reportTitle, 180);
doc.text(15, 20, splitTitle);

【讨论】：

谢谢，它帮助了我。就一个注释，在jsPDF的text方法中，splitTitle应该是第一个参数。
我正在使用 jsPDF 版本 1.2.60 和 doc.splitTextToSize(reportTitle, 180);在 api 中不再可用。我面临着同样的自动换行问题。我该怎么办？
我不知道有这个功能。非常感谢您为我节省了几个小时和严重的头痛。
@HamzaAhmedZia 看起来这些东西现在被认为是“插件”而不是核心的一部分：rawgit.com/MrRio/jsPDF/master/docs/…
@GlenSelle 我能够使用它而无需导入除 jsPDF 的缩小版本以外的任何内容，只需 doc.splitTextToSize 开箱即用

【解决方案2】：

JSPDF中的自动分页和文本换行问题可以通过以下代码实现

 var splitTitle = doc.splitTextToSize($('#textarea').val(), 270);
    var pageHeight = doc.internal.pageSize.height;
    doc.setFontType("normal");
    doc.setFontSize("11");
    var y = 7;
    for (var i = 0; i < splitTitle.length; i++) {                
        if (y > 280) {
            y = 10;
            doc.addPage();
        }
        doc.text(15, y, splitTitle[i]);
        y = y + 7;
    }
    doc.save('my.pdf');

【讨论】：

谢谢@KB1788，这对我有用。在文本区域中有一个 XML 文件，该文件对于一页来说太长了。此解决方案会在 XML 页面过长并创建新页面时破坏 XML。

【解决方案3】：

您可以只使用text function 中的可选参数maxWidth。

doc.text(15, 15, reportTitle, { maxWidth: 40 });

一旦达到 maxWidth 就会分割文本并从下一行开始。

【讨论】：

【解决方案4】：

要将长字符串包装到页面中，请使用以下代码：

var line = 25 // Line height to start text at
var lineHeight = 5
var leftMargin = 20
var wrapWidth = 180
var longString = 'Long text string goes here'

var splitText = doc.splitTextToSize(longString, wrapWidth)
for (var i = 0, length = splitText.length; i < length; i++) {
  // loop thru each line and increase
  doc.text(splitText[i], leftMargin, line)
  line = lineHeight + line
}

【讨论】：

【解决方案5】：

如果您需要动态添加新行，您希望访问 doc.splitTextToSize 返回的数组，然后在遍历每一行时添加更多垂直空间：

var y = 0, lengthOfPage = 500, text = [a bunch of text elements];

//looping thru each text item
for(var i = 0, textlength = text.length ; i < textlength ; i++) {

    var splitTitle = doc.splitTextToSize(text[i], lengthOfPage);

    //loop thru each line and output while increasing the vertical space
    for(var c = 0, stlength = splitTitle.length ; c < stlength ; c++){

        doc.text(y, 20, splitTitle[c]);
        y = y + 10;

    }

}

【讨论】：

这个答案很棒。您可能想检查 y+10 > pageHeight 是否并执行 doc.addPage()，然后重置 y = 10 ，以便它可以在新页面上继续文本

【解决方案6】：

工作辅助函数

这是一个基于@KB1788 和@user3749946 回答的完整帮助函数：

它包括换行、换页和一些样式控制：

（提供要点here）

function addWrappedText({text, textWidth, doc, fontSize = 10, fontType = 'normal', lineSpacing = 7, xPosition = 10, initialYPosition = 10, pageWrapInitialYPosition = 10}) {
  var textLines = doc.splitTextToSize(text, textWidth); // Split the text into lines
  var pageHeight = doc.internal.pageSize.height;        // Get page height, well use this for auto-paging
  doc.setFontType(fontType);
  doc.setFontSize(fontSize);

  var cursorY = initialYPosition;

  textLines.forEach(lineText => {
    if (cursorY > pageHeight) { // Auto-paging
      doc.addPage();
      cursorY = pageWrapInitialYPosition;
    }
    doc.text(xPosition, cursorY, lineText);
    cursorY += lineSpacing;
  })
}

用法

// All values are jsPDF global units (default unit type is `px`)
const doc = new jsPDF();

addWrappedText({
  text: "'Twas brillig, and the slithy toves...", // Put a really long string here
  textWidth: 220,
  doc,

  // Optional
  fontSize: '12',
  fontType: 'normal',
  lineSpacing: 7,               // Space between lines
  xPosition: 10,                // Text offset from left of document
  initialYPosition: 30,         // Initial offset from top of document; set based on prior objects in document
  pageWrapInitialYPosition: 10  // Initial offset from top of document when page-wrapping
});

【讨论】：

cursorY = pageWrap;不起作用。我相信它应该是 pageWrapInitialYPosition
这很有用。 A更正：splitToSize使用字体设置来确定线条的宽度，所以需要将setFontSize和其他字体设置移到splitToSize之前。不用传入lineSpacing，您可以轻松地从fontSize 计算它：const lineSpacing = fontSize * doc.getLineHeightFactor() * .35;（乘以 0.35 将点转换为 mm，如果您不使用 mm，请调整。）

【解决方案7】：

当我们在 jsPDF 中使用换行符时，我们得到一个错误，指出 b.match 没有定义，要解决这个错误，只需取消 js 并用 String(b) 替换 b.match。匹配，你会得到这个错误两次，只需替换两者，然后我们得到 c.split 没有定义，在这种情况下做同样的事情，用 String(c) 替换它。匹配，我们就完成了。现在您可以在 pdf 中看到换行符。谢谢

【讨论】：