生成PDF中的自动换行(使用jsPDF)

Question

我正在做的是使用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);

没有任何东西可以阻止reportTitle从页面上运行

Answer 1

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

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

Answer 2

您可以直接使用text函数中的可选参数maxWidth

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

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

Answer 3

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');

Answer 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
}

Answer 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;
    }
}

Answer 6

工作助手函数

下面是一个基于@KB1788和@user3749946的答案的完整的辅助函数:

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

(此处提供要点)

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
});  

Answer 7

当我们在jsPDF中使用换行时，我们会得到一个错误，说明b.match没有定义，要解决这个错误，只需取消js并替换b。匹配与字符串(b)。match和u将得到这个错误两次，只是替换它们，然后我们得到c。split没有定义，只是在这种情况下将其替换为String(c)。match，就完成了。现在你可以在你的pdf中看到换行。谢谢你