如何在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 相关文章推荐
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
如何理解Vue的render函数的具体用法
Aug 30 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
回顾Javascript React基础
Jun 15 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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
2019十大人气国漫
2020/03/13 国漫
怎样去阅读一份php源代码
2009/08/21 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JS中style属性
2006/10/11 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
详解Python中find()方法的使用
2015/05/18 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
全国道德模范事迹
2014/02/01 职场文书
婚礼主持词
2014/03/13 职场文书
总经理任命书
2014/03/29 职场文书
生物科学专业自荐书
2014/06/20 职场文书
2014年实验室工作总结
2014/12/03 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python