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

介绍

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能有所帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • Angular2下使用pdf插件的方法详解

    Angular2下使用pdf插件的方法详解

    前言 最近因为工作的原因,需要在Angualr2建的项目里做一个pdf显示的功能,在网上找了个插件,不过由于是第一次使用额外插件,在用的时候遇到了一些坑,这里权且记一下使用的步骤,方便以后的参考. 安装 这里需要安装两个包:pdfjs-dist和ng2-pdf-viewer,安装时是要顺便保存到package.json里的,因此在项目根目录下输入下面命令: npm install pdfjs-dist --save npm install ng2-pdf-viewer --save 于此同时,我

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

    介绍 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使用方便,但是不支持中

  • Angular.js中window.onload(),$(document).ready()的写法浅析

    一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi

  • Angular.js中数组操作的方法教程

    前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以

  • Angular.js中$resource高大上的数据交互详解

    本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离. 这个可以通过$resourceProvider配置: app.config(

  • Angular.JS中select下拉框设置value的方法

    Angular.JS中select下拉框设置value的方法

    前言 本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • 解决Angular.js中使用Swiper插件不能滑动的问题

    我们都知道swiper是交互体验十分好的轮播插件 但是通过angular(ng-repeat)循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行: html <div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div class="swiper-sli

  • JS中实现一个下载进度条及播放进度条的代码

    术上没太大难度,有难度的地方是怎么让整个动画比较流畅.一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下. 最后做出来的效果如下图所示: 小狗奔跑的动画是一个lottie动画,来自 codepen . 1. 获取下载进度 ajax里面可以拿到下载进度,如下代码所示: let xhr = new XMLHttpReque

  • 如何在Vue.JS中使用图标组件

    原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读. 此文不包含字体图标和SVG sprite.仅在此讨论允许用户按需导入的图标系统. There are three major ways of exposing API of an icon component in Vue.js and each one of them has its

  • Angular.js中angular-ui-router的简单实践

    开始之前 一些说明 angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由. 文中 Angular.js 的版本为 1.5.2 下载和安装 直接通过 bower 来安装 angular-ui-router 使用 bower 安装 angular-ui-router 之前,首先需要安装 npm 和 bower .npm 是node.js的包管理工具,下载安装node.js,即可完成 npm 的安装 通过 npm 安装 bower (如果未安装 bo

随机推荐