javascript - 使用 Angular 4、jsPDF、html2canvas 从 HTML/CSS 字符串生成 PDF

Question

我正在尝试使用 css 生成 pdf，但没有取得太大的成功。我有一个包含带有内联 css 的 html 的字符串，但是当我使用 jsPDF 时，生成的 PDF 不包含样式。我读到为了包含样式，我还应该使用 html2canvas，然后使用 jsPDF 添加图像。但是，这些都不适合我。

这是我的代码:

@Component({
  selector: 'app-pdf-generator',
  templateUrl: './pdf-generator.component.html',
  styleUrls: ['./pdf-generator.component.css'],      
  host: { '[@routeAnimation]': 'true', 'style' : 'display:block;' }

  onSubmit()
  {
     let servers = this.serversService.getServers();
     var rows = this.buildServerListByOptions(servers)
     var htmlText = this.buildPdfText(rows); //the final html string I want to render on a PDF file.


     //Here I need to genereate a DOM element, create an image of it using html2canvas, and then save as PDF. I **don't** want the element to appear on the page though, only in the PDF file.

     // doc.addImage(canvas, 0,0,100,100);
     // doc.save('report.pdf')

尽管阅读了我在网上能找到的所有内容，但我仍然无法使用 html2canvas 库。我希望能提供与我的示例相关的代码示例(动态创建 DOM 元素、创建它的图像、添加到 PDF)或者使用 angular 生成具有 CSS 支持的 PDF 的另一种方法。

谢谢!

Answer 1

这里有一个生成 pdf 的例子供你引用。但是这里我没有使用 html2canvas 来做样式。希望对您有所帮助:

在 HTML 中:

<a class="page-link" style="  (click)="convert()">Generate PDF</a>

在 TS 文件中:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

并使用下面的函数:

convert() {

    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];

    var imgData = 'data:image/jpeg;base64,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H3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='




var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]


rowCountModNew.forEach(element => {
      rows.push(element);

    });



    doc.addImage(imgData, 'JPEG', 90, 60, 20, 20);


    doc.autoTable(col, rows);
    doc.save('Test.pdf');
  }

在表格前后添加文字:

convert() {       
    var doc = new jsPDF();
    var col = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];    
    var imgData = 'data:image/jpeg;base64,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H3mzT6KBhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAf/9k='   


var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]

rowCountModNew.forEach(element => {
      rows.push(element);          
    });

    doc.text(80, 20, 'Report Final');
    doc.addImage(imgData, 'JPEG', 90, 40, 20, 20);    
    doc.autoTable(col, rows,{startY: 60});
    doc.text(80, 130, 'Thank you');
    doc.save('Test.pdf');        
  }

它看起来像: