这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
最近这两天公司正在做一个 PDF 协议下载的功能,目前的解决方案可以分为完全前端生成和后端生成两种方式。前端生成 PDF 有 jsPDF 和 pdfmake 两种方式,下面这篇文章就给大家分享下如何在 Angular.JS 中接收并下载 PDF 的方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。
介绍
jsPDF 是一个使用 Javascript 语言生成 PDF 的开源库。你可以在 Firefox 插件,服务端脚本或是浏览器脚本中使用它。
客户端 Safari 和 iPhone Safari 支持得最好, 其次是 Opera 和 Windows 下的 Firefox 3 等。IE 暂不支持。
示例代码:
- var doc = new jsPDF();
- doc.text(20, 20, 'Hello world.');
- doc.save('Test.pdf');
服务器端可以完美运行。
jsPDF 使用方便,但是不支持中文
pdfmake 支持中文,但是由于还需要引入 font 文件,导致文件体积可到十几 M,不适合前端。
pdfmake 是基于客户端服务器的 PDF 打印解决方案,完全基于 JavaScript 开发。提供强大的排版引擎
安装:
- client-version bower install pdfmake
- server-version npm install pdfmake
最后还是采用了后端生成 PDF, 前端通过接口请求,后端返回 PDF Stream, 最后前端通过 Blob 生成 PDF 并实现下载。
AngularJS 中的解决办法
- $http.get('/receivePDFUrl', {
- responseType: 'arraybuffer'
- }) // 设置$http get请求的responseType为arraybuffer
- .success(function(data) {
- var file = new Blob([data], {
- type: 'application/pdf'
- }); // 使用Blob将PDF Stream 转换为file
- var fileUrl = URL.createOjectURL(file);
- window.open(fileUrl); // 在新的页面中打开PDF
- })
如何设置 PDF 的文件名
- $http.get('/receivePDFUrl', {
- responseType: 'arraybuffer'
- }) // 设置$http get请求的responseType为arraybuffer
- .success(function(data) {
- var file = new Blob([data], {
- type: 'application/pdf'
- }); // 使用Blob将PDF Stream 转换为file
- var fileUrl = URL.createOjectURL(file);
- var a = document.createElement('a');
- a.href = fileURL;
- a.target = '_blank';
- a.download = 'yourfilename.pdf';
- document.body.appendChild(a);
- a.click();
- })
遇到的问题
后端采用 reset api 的方式来写接口。前端框架采用的 AngularJS,所以就采用 $resouce 来调用接口,同样也设置了
,但是生成的 PDF 却无法打开。最后还是改为用
- responseType:arraybuffer
方式就可以了。
- $http.get()
兼容性问题
由于使用了 html5 API: Bolb,所以只能支持 IE10+。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用 Angular.js 能有所帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0430/330169.html