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

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 3

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

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 4

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

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

这将在文本达到 maxWidth 时拆分并从下一行开始。

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的答案的完整助手功能：

它包括换行，页面换行和某些样式控制：

（要旨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
});

Answer 7

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

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

7 个答案:

工作助手功能

用法