使用Ionic框架生成PDF文件 [英] Generating PDF file with Ionic framework
问题描述
有没有任何插件的Ionic框架使用html内容生成pdf文件？
Is there any plugin for Ionic framework to generate a pdf file using html content?
基本上，我需要创建一个html的值从Ionic移动应用程序传递，一些css样式，然后将其转换为可以保存在设备（Android设备和iOS设备）本地文件系统内的pdf文件。
Basically I need to create a html with values passed from an Ionic mobile application and some css styles, and then convert it into a pdf file which can be saved inside the local file system in a device (Android device and iOS device). I want to do this with a javascript like library so that it can be used in both Android and iOS devices.
推荐答案
好吧，我想这是一个类似JavaScript的图书馆，因此它可以用于Android和iOS设备。这是一个更详细的答案，提供了我在第一个答案中提到的例子。我在github上有一个repo：
Alright, this is a more detailed answer that provides the example I mentioned in my first answer. I have a repo on github:
和在线github.io示例：
and an online github.io example:
首先，我创建了一个ReportBuilderSvc，用于生成pdfMake.org使用的JSON格式的实际报表声明。这个过程将是应用程序特定的，所以我生成这作为一个单独的服务。你可以查看我的示例代码，并在pdfMake.org网站上玩你自己的文档定义。一旦你有一个报表设计，在_generateReport方法中放置你自己的文档定义JSON。
First off, I created a ReportBuilderSvc that is used to generate the actual report declaration in the JSON format used by pdfMake.org. This process will be application specific, so I generated this as a separate service. You can view my example code and play around w/your own document definition on the pdfMake.org website. Once you have a report design, place your own document definition JSON in the _generateReport method.
然后，我包装的pdfMake.org库在一个免费的角服务，名为ReportSvc 。这将调用ReportBuilderSvc的public generateReport（）方法来获取reportDefinition JSON。我打破了生成报告为$ q promise-wrapped内部方法的过程，以允许服务发出客户端可以消耗更新UI的进度事件。在较旧/较慢的iPhone 4设备上，我看到报告过程需要长达30-45秒。此更新UI的能力非常重要，否则应用程序看起来已冻结。
Then, I wrapped the pdfMake.org library in a complimentary angular service, named ReportSvc. This calls the public generateReport() method of the ReportBuilderSvc to get the reportDefinition JSON. I broke the process of generating the report into $q promise-wrapped internal methods to allow the service to emit progress events that the client can consume for updating the UI. On older/slower iPhone 4 devices I saw the report process take as much as 30-45 sec. This ability to update the UI is really important, otherwise the app looks like it has frozen.
包装器将过程分解为：
- generateReportDef - > in： ReportBuilderSvc out： JSON rpt对象
- generateReportDoc - > in： JSON doc def out： pdfDoc对象
- generateReportBuffer - > > pdfDoc object out： buffer []
- generateReportBlob - > in： > Blob对象
- saveFile - > in： Blob对象 out： filePath报表
- generateReportDef --> in: ReportBuilderSvc out: JSON rpt object
- generateReportDoc --> in: JSON doc def out: pdfDoc object
- generateReportBuffer --> in: pdfDoc object out: buffer[]
- generateReportBlob --> in: buffer[] out: Blob object
- saveFile --> in: Blob object out: filePath of report
在每个步骤，服务使用内部效用函数在$ rootScope上广播一个事件：
At each step the service broadcasts an event on the $rootScope using an internal utility function:
function showLoading(msg) {
$rootScope.$broadcast('ReportSvc::Progress', msg);
}
这允许客户端在控制器中订阅 / p>
This allows clients to 'subscribe' in the controller or consuming code with:
$scope.$on('ReportSvc::Progress', function(event, msg) {
_showLoading(msg);
});
最后，为了显示pdf，我使用一个iframe并设置src w /生成的dataURI用于在浏览器中的在线演示。而且，我使用InAppBrowser和在设备或模拟器上运行时创建的本地文件。我计划清理这一点，以便它可以作为一个图书馆和注入作为一个角服务。这将使客户自由地参加报告声明w / a安全包装的角度/离子服务。
And finally, to display the pdf, I use an iframe and set the src w/ the generated dataURI for the online demo in the browser. And, I use the InAppBrowser and the local file created when run on the device or emulator. I plan to clean this up a little more so that it can be included as a library and injected as an angular service. This will leave the client free to attend to the report declaration w/ a safely wrapped angular/ionic service.
任何想法都赞赏，因为我是新的节点，angular ，离子世界，肯定也可以使用帮助...
Any thoughts are appreciated as I am new to the node, angular, ionic world and can definitely use help too...
这篇关于使用Ionic框架生成PDF文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
