如何在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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript中的类继承
Nov 25 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
layui实现table加载的示例代码
Aug 14 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 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实现蜘蛛访问日志统计
2013/07/05 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
javascript中常用编程知识
2013/04/08 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
js实现秒表计时器
2019/12/16 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
vue实现选中效果
2020/10/07 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
python实现微信打飞机游戏
2020/03/24 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
项目考察欢迎辞
2014/01/17 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
相亲活动方案
2014/08/26 职场文书
2014年科研工作总结
2014/12/03 职场文书
保姆聘用合同
2015/09/21 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python