如何在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 相关文章推荐
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
使用Canvas绘制一个游戏人物属性图
Mar 25 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP多维数组排序array详解
2017/11/21 PHP
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python全排列操作实例分析
2018/07/24 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
10个示例带你掌握python中的元组
2020/11/23 Python
Django权限控制的使用
2021/01/07 Python
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
金融专业个人求职信
2013/09/22 职场文书
预备党员转正材料
2014/12/19 职场文书
暑假打工感想
2015/08/07 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Python自动化测试PO模型封装过程详解
2021/06/22 Python