• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > 如何在Angular.JS中接收并下载PDF

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angular js pdf,angular js,angular.js下载,angular js菜鸟教程,angular.js官网等相关知识,希望在学习及工作中可以帮助到您

介绍

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');
</div>

服务器端可以完美运行。

jsPDF使用方便,但是不支持中文

pdfmake支持中文,但是由于还需要引入font文件,导致文件体积可到十几M,不适合前端。

pdfmake 是基于客户端服务器的 PDF 打印解决方案,完全基于 JavaScript 开发。提供强大的排版引擎

安装:

client-version bower install pdfmake
server-version npm install pdfmake
</div>

最后还是采用了后端生成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
 })
</div>

如何设置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();
 })
</div>

遇到的问题

后端采用reset api的方式来写接口。前端框架采用的AngularJS,所以就采用$resouce来调用接口,同样也设置了responseType:arraybuffer,但是生成的PDF却无法打开。最后还是改为用$http.get()方式就可以了。

兼容性问题

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

总结

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

</div>

您可能想查找下面的文章:

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

相关文章

  • 2017-05-30AngularJS中如何使用echart插件示例详解
  • 2017-05-30Angular的自定义指令以及实例
  • 2017-05-30测试IE浏览器对JavaScript的AngularJS的兼容性
  • 2017-05-30深入理解angularjs过滤器
  • 2017-05-30AngularJs Injecting Services Into Controllers详解
  • 2017-05-30RequireJs的使用详解
  • 2017-05-30AngularJS入门教程之XHR和依赖注入详解
  • 2017-05-30Angular.JS内置服务$http对数据库的增删改使用教程
  • 2017-05-30AngularJS入门教程之AngularJS指令
  • 2017-05-30简介AngularJS的视图功能应用

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS入门教程之双向绑定详解
    • AngularJS指令与控制器之间的交互功能示例
    • AngularJS iframe跨域打开内容时报错误的解决办法
    • AngularJS 视图详解及示例代码
    • AngularJS入门之动画
    • Angular.Js中ng-include指令的使用与实现
    • Angularjs使用directive自定义指令实现attribute继承的方法详解
    • 探索angularjs+requirejs全面实现按需加载的套路
    • 浅析Angular2子模块以及异步加载
    • 详解AngularJS控制器的使用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有