使用Angularjs中的pdfMake从HTML生成PDF

Question

我想创建一个PDF使用我的HTML pdfMake和Angular（我也试了jsPDF，不能让它无论是工作）。我尝试在Angular控制器中使用以下代码：var blob = new Blob([document.getElementById('exportable').innerHTML])var docDefinition = {    content: [blob]}pdfMake.createPdf(docDefinition).open();但是我收到以下错误：无法识别的文档结构：{“_ margin”：null}“。我的HTML由div中的两个简单表组成exportable。如果有人知道这个问题的解决方案，或者从Angular获取HTML到PDF的其他方法，请帮助。任何帮助都非常感谢！

Answer 1

好的，我想出来了。1.你需要html2canvas和pdfmake。您不需要在app.js中进行任何注入，只需包含在脚本标记中

在要创建PDF的div上，添加如下ID ID：

 <div id="exportthis">

在Angular控制器中，在调用html2canvas时使用div的id：

使用toDataURL（）将画布更改为图像

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

控制器中完成的代码如下所示：

       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");

            }

        });

我希望这有助于其他人。快乐的编码！

Answer 2

这是它对我有用的我正在使用Angular2应用程序中的html2pdf，所以我在控制器中引用了这个函数

var html2pdf = (function(html2canvas, jsPDF) {

在html2pdf.js中声明。

所以我在我的angular-controller声明中添加了这个声明：

declare function html2pdf(html2canvas, jsPDF): any;

那么，从我的角度控制器的方法我调用这个函数：

generate_pdf(){

    this.someService.loadContent().subscribe(

      pdfContent => {

        html2pdf(pdfContent, {

          margin:       1,

          filename:     'myfile.pdf',

          image:        { type: 'jpeg', quality: 0.98 },

          html2canvas:  { dpi: 192, letterRendering: true },

          jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }

        });

      }

    );

  }

希望能帮助到你