在Angularjs使用pdfMake生成HTML PDF [英] Generate PDF from HTML using pdfMake in Angularjs

问题描述

我想创建一个使用pdfMake和角度（我也试过jsPDF并不能得到它要么工作）从我的HTML的PDF文件。我试着用下面的code在我的角度控制器：

I am trying to create a PDF from my HTML using pdfMake and Angular (I've also tried jsPDF and couldn't get it to work either). I tried using the following code in my Angular controller:

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

但我收到以下错误：无法识别的文档结构：{_margin：空}。

but I receive the following error: Unrecognized document structure: {"_margin":null}".

我的HTML包括两个简单的表在一个div出口。

My HTML consists of two simple tables in a div "exportable".

如果有人知道解决这个问题，或者另一种方式来获得HTML到从角PDF格式，请帮助。

If anyone knows a solution to this issue, or another way to get the HTML into a PDF from Angular, PLEASE help.

任何帮助，大大AP preciated！

Any assistance is GREATLY appreciated!

推荐答案

好吧，我想通了这一点。
1.您需要 html2canvas 和 pdfmake 。您不需要做任何注射在app.js要么，就在您的脚本标记

Okay, I figured this out. 1. You will need html2canvas and pdfmake. You do NOT need to do any injection in your app.js to either, just include in your script tags

在您要创建的PDF，添加一个ID名称像下面的DIV：

1. On the div that you want to create the PDF of, add an ID name like below:

 <div id="exportthis">

在您的角度控制器使用div的ID在调用html2canvas：

In your Angular controller use the id of the div in your call to html2canvas:

使用toDataURL改变画布图像（）

change the canvas to an image using toDataURL()

然后在你的docDefinition为pdfmake图像分配到的内容。

Then in your docDefinition for pdfmake assign the image to the content.

在您的控制器完成的code将是这样的：

The completed code in your controller will look like this:

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

我希望这可以帮助别人。编码快乐！

I hope this helps someone else. Happy coding!

这篇关于在Angularjs使用pdfMake生成HTML PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！