PhoneGap 应用内部生成 PDF 文档

admin

前段时间，有人问我能否在phonegap应用中生成pdf文件，答案是肯定的而且实现起来也很简单。我使用JSPDF这个标准的JavaScript类库来实现这个功能：
下面是示例：首先在命令行创建一个PhoneGap工程 create a new PhoneGap project
加入控制台输出和写文件插件：

1. 
   
2. phonegap create . "jspdf.sample" "JSPDF App"
   
3. 
   
4. phonegap local plugin add org.apache.cordova.file
   
5. 
   
6. phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

复制代码

然后，下载JSPDF代码 download the JSPDF project code, 将目标码拷贝到PhoneGap工程目录下。我放在 www/js下。然后，在main HTML文件中引入该文件。

1. 
   
2. <script type="text/javascript" src="js/jspdf.source.js"></script>

复制代码

我用的是'dist'目录下未经压缩/最小化的源文件。

接下来我们开始生成PDF文件。下面的代码片段利用PhoneGap的文件处理 API PhoneGap's File API.  来生成一个简单的PDF文件并保存至设备的本地。这个应该算是*AFTER* the deviceready事件。
其中console.log只是为了调试使用：

1. //FIRST GENERATE THE PDF DOCUMENT
   
2. console.log("generating pdf...");
   
3. var doc = new jsPDF();
   
4. 
   
5. doc.text(20, 20, 'HELLO!');
   
6. 
   
7. doc.setFont("courier");
   
8. doc.setFontType("normal");
   
9. doc.text(20, 30, 'This is a PDF document generated using JSPDF.');
   
10. doc.text(20, 50, 'YES, Inside of PhoneGap!');
    
11. 
    
12. var pdfOutput = doc.output();
    
13. console.log( pdfOutput );
    
14. 
    
15. //NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
    
16. console.log("file system...");
    
17. window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
    
18. 
    
19.    console.log(fileSystem.name);
    
20.    console.log(fileSystem.root.name);
    
21.    console.log(fileSystem.root.fullPath);
    
22. 
    
23.    fileSystem.root.getFile("test.pdf", {create: true}, function(entry) {
    
24.       var fileEntry = entry;
    
25.       console.log(entry);
    
26. 
    
27.       entry.createWriter(function(writer) {
    
28.          writer.onwrite = function(evt) {
    
29.          console.log("write success");
    
30.       };
    
31. 
    
32.       console.log("writing to file");
    
33.          writer.write( pdfOutput );
    
34.       }, function(error) {
    
35.          console.log(error);
    
36.       });
    
37. 
    
38.    }, function(error){
    
39.       console.log(error);
    
40.    });
    
41. },
    
42. function(event){
    
43. console.log( evt.target.error.code );
    
44. });

复制代码

PDF创建过程其实很简单。只要使用doc.output()获取到已创建文件的字符串标识就能做相应的操作。不论是保存到本地，发送到服务器甚至是直接发送到本地设备上的PDF阅读器中.

更新更详细的资料可以从 JSPDF open source project on GitHub 和online examples 上获取到。

上面代码生成的PDF文件可以从这里获取You can download the sample PDF here

ytlvy

bean

人不错，学习学习 感觉phonegap+html越来越火了。

qiurj

好东西啊，谢谢分享 感谢phonegap中文网

lxychinese

好帖就是要顶 学习学习 html5趋势不可挡啊，虽然还在学习阶段