PhoneGap中文网

 找回密码
 立即注册
查看: 10899|回复: 4
打印 上一主题 下一主题

PhoneGap 应用内部生成 PDF 文档

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2014-5-7 20:11:42 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

  1. phonegap create . "jspdf.sample" "JSPDF App"

  2. phonegap local plugin add org.apache.cordova.file

  3. 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. <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. doc.text(20, 20, 'HELLO!');

  5. doc.setFont("courier");
  6. doc.setFontType("normal");
  7. doc.text(20, 30, 'This is a PDF document generated using JSPDF.');
  8. doc.text(20, 50, 'YES, Inside of PhoneGap!');

  9. var pdfOutput = doc.output();
  10. console.log( pdfOutput );

  11. //NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
  12. console.log("file system...");
  13. window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

  14.    console.log(fileSystem.name);
  15.    console.log(fileSystem.root.name);
  16.    console.log(fileSystem.root.fullPath);

  17.    fileSystem.root.getFile("test.pdf", {create: true}, function(entry) {
  18.       var fileEntry = entry;
  19.       console.log(entry);

  20.       entry.createWriter(function(writer) {
  21.          writer.onwrite = function(evt) {
  22.          console.log("write success");
  23.       };

  24.       console.log("writing to file");
  25.          writer.write( pdfOutput );
  26.       }, function(error) {
  27.          console.log(error);
  28.       });

  29.    }, function(error){
  30.       console.log(error);
  31.    });
  32. },
  33. function(event){
  34. console.log( evt.target.error.code );
  35. });
复制代码


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

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

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





回复

使用道具 举报

0

主题

22

帖子

54

积分

注册会员

Rank: 2

积分
54
沙发
发表于 2015-4-29 18:54:14 | 只看该作者
回复 支持 反对

使用道具 举报

0

主题

19

帖子

51

积分

注册会员

Rank: 2

积分
51
板凳
发表于 2015-4-29 19:19:35 | 只看该作者
人不错,学习学习 感觉phonegap+html越来越火了。
回复 支持 反对

使用道具 举报

0

主题

15

帖子

53

积分

注册会员

Rank: 2

积分
53
地板
发表于 2015-4-30 02:25:34 | 只看该作者
好东西啊,谢谢分享 感谢phonegap中文网
回复 支持 反对

使用道具 举报

0

主题

18

帖子

50

积分

注册会员

Rank: 2

积分
50
5#
发表于 2015-4-30 06:39:37 | 只看该作者
好帖就是要顶 学习学习 html5趋势不可挡啊,虽然还在学习阶段
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-5 23:24 , Processed in 0.082171 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表