如何使用jspdf生成完整的pdf?

时间:2018-07-29 11:20:08

标签: javascript html jspdf html2canvas html2pdf

我正在尝试使用 html2canvas jspdf 在我的应用程序中打印发票。 这是我的代码-

    private download(): void {

      let options = {
        pagesplit: true,
        background: '#fff',
        format: 'PNG',
        padding: 50,
        margin:{top: 10, right: 10, bottom: 100, left: 10, useFor:'page'}
      };

      const input = document.getElementById("content");

      html2canvas(input)
          .then((canvas) => {
              const pdf = new jsPDF("pt", "px", "a4");
              pdf.addHTML(input, 20, 10, options, () => {
                  pdf.save("invoice.pdf");
              });
          });

    }

该代码有效,但是正在打印的PDF仅是视口屏幕截图的PDF。滚动部分中发票的任何视图部分将被打印,其余部分将不打印。我想打印完整的发票,而不是打印在视口屏幕截图中的零件。

我需要进行哪些更改。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果您仅针对打印而不是保存pdf文件。您应该在Windows的print和Mac的ctrl + p上使用cmd + p媒体查询并在内置的打印机制触发器中使用浏览器。

jspdf几乎没有问题,例如它将在生成PDF时重新获取所有远程图像。 printcss或印刷媒体查询不会发生这种情况。