如何在Angular.JS中接收并下载PDF


Posted in Javascript onNovember 26, 2016

介绍

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来调用接口,同样也设置了responseType:arraybuffer,但是生成的PDF却无法打开。最后还是改为用$http.get()方式就可以了。

兼容性问题

由于使用了HTML5 API: Bolb,所以只能支持IE10+。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 #Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 #Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 #Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 #Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
php目录操作实例代码
2014/02/21 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
分享php多功能图片处理类
2016/05/15 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
Python的另外几种语言实现
2015/01/29 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python中如何设置代码自动提示
2020/07/15 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
什么是岗位职责
2013/11/12 职场文书
会计专业导师推荐信
2014/03/08 职场文书
会计岗位职责模板
2014/03/12 职场文书
项目投资意向书
2014/04/01 职场文书
行政专员求职信范文
2014/05/03 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
财务整改报告范文
2014/11/05 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python