为了账号安全,请及时绑定邮箱和手机立即绑定

使用Angularjs中的pdfMake从HTML生成PDF

使用Angularjs中的pdfMake从HTML生成PDF

红颜莎娜 2019-08-31 15:03:55
我想创建一个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的其他方法,请帮助。任何帮助都非常感谢!
查看完整描述

3 回答

?
温温酱

TA贡献1752条经验 获得超4个赞

好的,我想出来了。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");

            }

        });

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


查看完整回答
反对 回复 2019-08-31
?
繁星coding

TA贡献1797条经验 获得超4个赞

这是它对我有用的我正在使用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' }

        });

      }

    );

  }

希望能帮助到你


查看完整回答
反对 回复 2019-08-31
  • 3 回答
  • 0 关注
  • 1330 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信