1

我正在用 jsPDF 做一个小项目。我需要编写彩色文本、更改字体大小并使用粗体文本。因此 fromHtml 是我的选择，因为我可以使用 css 和 html 轻松完成。

问题是只有大约一半的页面可用于使用 fromHtml 编写。如果它试图在它之外写入，则会创建一个新页面并将文本写入那里。

这是一个带有 javascript 代码的小 html 示例，可以自行运行。

<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

<script type="text/javascript">
  function fromHtmlTest() {
    var doc = new jsPDF({
      orientation: 'l',
      unit: 'px',
      format: [30, 30]
    });

    // doc.setFontSize(1); // the workaround for this problem

    var toWrite = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th"];

    for (var i = 0; i < toWrite.length; i++) {
      doc.fromHTML(
        '<div style="font-size:1">' + toWrite[i] + '</div>'
        , 1 // x
        , i // y
        , {
          'width': 10,
          'elementHandlers': {}
        }
      )
    }
    doc.save('Test.pdf');
  }
</script>

<body>
  <input type="button" value="Start" onclick="fromHtmlTest()" />
</body>

这是运行代码后的pdf图像：

fromHtml 示例 - 代码结果

fromHtml 示例 - 代码结果

“8th”应该在“7th”的正下方，而不是在下一页。如果将“9th”添加到数组中，也会添加另一个页面。

如何使用 fromHtml 使用整个页面？

编辑：作为解决方法“doc.setFontSize(1);” 成功了。我已将其作为注释添加到示例代码中。

4

0 回答 0