将 HTML 模板打印为 PDF - Angular 2答案

【问题标题】：Printing a HTML template as PDF - Angular 2将 HTML 模板打印为 PDF - Angular 2
【发布时间】：2019-02-07 00:06:36
【问题描述】：

我正在尝试使用 jsPDF 将我的 HTML 模板打印为 PDF，但出现错误。我该怎么做？

假设我有这个模板：

<div style="text-align:center;" class="sub-header col-lg-12 col-md-12 col-sm-12">
    <span class="welcome-message col-lg-12 col-md-12 col-sm-12">Hola mundo</span>
</div>

【问题讨论】：

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

标签： javascript html angular typescript

【解决方案1】：

您也可以使用 jsPDF。

这是一个使用 jsPDF 的example。

实现jsPDF之后还需要安装html2Canvas 并添加到package.json:

"dependencies": {
"html2canvas": "0.5.0-beta4",
"@types/html2canvas": "0.5.32"
.........
}

运行npm install

【讨论】：

【解决方案2】：

我使用过 jsPDF，但打印出来的 html 很丑，所以我决定手动创建表格。

这是一个框架的例子：

doc.setFontSize(22)
lineNumber = lineNumber - 6  // total number of mm in the table
doc.text(80, 20, 'Dayly tasks')  // Title
doc.setFontSize(12)   
doc.line(18, 30, 18, lineNumber)  //first vertical line
doc.line(192, 30, 192, lineNumber) //last vertical line
doc.line(18, lineNumber, 192, lineNumber)// last horizontal line
doc.line(18, 30, 192, 30) // first horizontal line
//drax inside the table
doc.line(18, 40, 192, 40)  // colon name
doc.line(42, 30, 42, lineNumber)  //col day
doc.line(172, 30, 172, lineNumber) // col activity
doc.line(152, 30, 152, lineNumber) // col duration
doc.setFontType("bold");
doc.text(20, 35, 'Date');
doc.text(70, 35, 'Activity Comment');
doc.text(154, 35, 'Duration');
doc.text(174, 35, 'Overtime')
doc.setFontType("normal");
doc.text(180, 280, pageNumber + '')

首先计算lineNumber的位置。

致以最诚挚的问候

【讨论】：

【解决方案3】：

最后，我用的是这两个链接：

第一个链接 它用于检查如何安装所需的库： Link

npm install jspdf --save

npm install @types/jspdf --save

angular-cli.json

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

第二个链接 用作开发所需代码的模型（抱歉，此答案是西班牙语）

Link

组件 TS

  pruebaDivAPdf() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    var source = $('#imprimir')[0];

    var specialElementHandlers = {
      '#bypassme': function (element, renderer) {
        return true
      }
    };
    var margins = {
      top: 60,
      bottom: 40,
      left: 20,
      width: 522
    };

    pdf.fromHTML(
      source,
      margins.left, // x coord
      margins.top, { // y coord
        'width': margins.width,
        'elementHandlers': specialElementHandlers
      },

      function (dispose) {
        pdf.save('Prueba.pdf');
      }, margins
    );
  }

HTML 组件

<a (click)="pruebaDivAPdf()" class="button">Pasar a PDF</a>

【讨论】：

$('#imprimir')[0]; '#bypassme' 来自哪里？