Question

我正在尝试使用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>

Answer 1

您也可以使用jsPDF。

这是使用jsPDF的example。

实施jsPDF后，您还需要安装html2Canvas 并将其添加到package.json：

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

运行npm install

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

最好的问候

Answer 3

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

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

npm install jspdf --save

npm install @ types / jspdf --save

角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>

将HTML模板打印为PDF格式 - Angular 2

3 个答案: