javascript - 在 Angularjs 中使用 pdfMake 从 HTML 生成 PDF

Question

我正在尝试使用 pdfMake 和 Angular 从我的 HTML 创建一个 PDF(我也尝试过 jsPDF，也无法让它工作)。我尝试在我的 Angular Controller 中使用以下代码:

var blob = new Blob([document.getElementById('exportable').innerHTML])
var docDefinition = {
    content: [blob]
}
pdfMake.createPdf(docDefinition).open();

但我收到以下错误:

Unrecognized document structure: {"_margin":null}".

我的 HTML 包含一个 div exportable 中的两个简单表格。

如果有人知道这个问题的解决方案，或者其他从 Angular 将 HTML 转换为 PDF 的方法，请提供帮助。

非常感谢任何帮助!

Answer 1

好的，我想通了。

1. 您需要 html2canvas和 pdfmake .你不需要在你的 app.js 中做任何注入(inject)，只需包含在你的脚本标签中

2. 在要为其创建 PDF 的 div 上，添加如下 ID 名称:

    <div id="exportthis">
   

3. 在 Angular Controller 中，在调用 html2canvas 时使用 div 的 ID:

4. 使用 toDataURL() 将 Canvas 更改为图像

5. 然后在您的 docDefinition for pdfmake 中将图像分配给内容。

6. Controller 中的完整代码如下所示:

          html2canvas(document.getElementById('exportthis'), {
               onrendered: function (canvas) {
                   var data = canvas.toDataURL();
                   var docDefinition = {
                       content: [{
                           image: data,
                           width: 500,
                       }]
                   };
                   pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
               }
           });
   

我希望这对其他人有帮助。编码愉快!