使用js直接下载pdf文件而不用在新的浏览器窗口打开
最近接了一个需求,要求用户点击下载按钮后直接下载pdf文件,而不是打开一个新窗口,让用户再去手动保存。
接到需求后我立刻着手在网上查找文档,发现很多声称可以实现直接下载的方法都不行,只有下面这个方法成功实现了我的需求,现在翻译过来,供更多的人使用。
原文:How to trigger the direct download of a PDF with JavaScript
现在的web应用基本都运行在现代浏览器上,科技的进步使得我们有很多新的API接口可以调用,其中一个优势是我们可以直接使用blob和FileReader下载文件,而不用重定向到一个新的标签页。
在这篇文章中,我将将演示在一个web页面中,直接通过url下载一个pdf文件。
注意
在案例中我们将下载use a PDF hosted in the Mozilla Github IO website,因为它是免费的而且设置好了CORS 头,我们可以在任何地方使用而不用担心跨域问题。
依赖
需要使用FileSaver库来实现下载的目标。这个库支持UMD,所以你可以直接在script标签中引入,也可以引入模块中使用。
如果你使用npm,你可以这样安装它:
npm install file-saver --save
然后你就可以像下面这样使用它了:
var FileSave = require('file-save');
var blob = new Blob(["hello world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello World.txt");
或者
import FileSave from 'file-save';
var blob = new Blob(["hello world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello World.txt");
另外,你还可以直接下载FileSaver然后在标签中使用它。
如下首先引入js文件
<script src="FileSaver.min.js"></script>
然后使用
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});saveAs(blob, "hello world.txt");
点此点此查看官方文档
使用url直接下载pdf
多亏了FileSaver.js,你可以很容的用JavaScript在浏览器中保存文件数据。FileSaver.js实现了浏览器不支持直接下载的功能,它是在客户端下载文件,保存web应用数据,或者发送到服务器比较敏感的数据。
在这样的场景下,你想下载服务器上的pdf文件,但由于某些原因不想让用户产生点击等行为,你可以使用FileSaver.js轻松实现。在下面的例子中,我们通过一个简单的url下载pdf,根据你的web应用的使用场景,pdf文件仅仅在服务器满足某些条件的时候才可以下载,最后通过JavaScript下载和处理。
var oReq = new XMLHttpRequest();
// The Endpoint of your server
var URLToPDF = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";// Configure XMLHttpRequest
oReq.open("GET", URLToPDF, true);// Important to use the blob response type
oReq.responseType = "blob";// When the file request finishes
// Is up to you, the configuration for error events etc.
oReq.onload = function() {// Once the file is downloaded, open a new window with the PDF// Remember to allow the POP-UPS in your browservar file = new Blob([oReq.response], { type: 'application/pdf' });// Generate file download directly in the browser !saveAs(file, "mypdffilename.pdf");
};oReq.send();
当文件下载结束的时候,保存程序会自动开始保存。
提醒一下哦,如果浏览器不支持Blob,可以使用这个补丁哦.
喜欢的同学可以去我的博客逛逛哦
使用js直接下载pdf文件而不用在新的浏览器窗口打开相关推荐
- php+预览和下载pdf文件,vue实现在线预览pdf文件和下载(pdf.js)
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...
- java从页面下载pdf文件到本地
java从页面下载pdf文件,strtus2为例,其他框架语法大致一样 直接上代码 这边我传了个参数 从数据库中查出来文件存在服务器的相对路径 页面 <button class="la ...
- 下载PDF文件及打印PDF文件
一:下载PDF 如果单纯的用A标签设置download属性来下载是直接打开pdf文件的而不是下载. import { download } from './download'; /*** 下载PDF文 ...
- PHP ajax 远程下载PDF文件保存在本地服务器
在一些时候我们想ajax方式来保存一些PDF文件,尤其是它放在远程服务器上,并且是保存在我们自己的服务器上存储,这个时候我们需要写一段程序来帮助我们完成这个工作,本文介绍了PHP 远程下载PDF文件保 ...
- 微信公众号内,实现下载 PDF 文件。
背景:需要在 微信公众号 内实现,通过点击一个[下载PDF文件]按钮,预期将 PDF 文件下载到本地自行打印. 前言:首先,本文采用的是 配合 后端 的实现方案.后端 返回file文件,通过 a 链接 ...
- H5 下载PDF文件
h5 下载pdf 文件 请看代码: fetch(url).then(res => {* 响应一个promise 对象// 此处响应体的是一个 [ReadableStream]console.lo ...
- Linux无法阅读caj文件解决办法之一(下载pdf文件)
在FireFox浏览器上直接安装下面链接中的脚本,然后重启浏览器就可以下载pdf文件了 https://greasyfork.org/zh-CN/scripts/389343-%E4%B8%AD%E5 ...
- 一步一步教你用Python爬虫框架Scrapy下载Pdf文件
哈喽,感谢你在这寂寞的晚上看到这篇寂寞的文章.今天接到朋友的一个需求,下载pdf文件并且用网络上的书名保存.想到下载pdf文件啊,虽然requests也能实现,但是速度还是太慢了,于是乎,Scrapy ...
- 安卓从服务器中下载pdf文件 然后调用第三方软件WPS Office打开
安卓从服务器中下载pdf文件 然后调用第三方软件WPS Office打开 前提: 高版本想使用Uri.fromFile() file://的形式 需要在onCreate 或init方法中添加下面代码. ...
最新文章
- 《企业大数据系统构建实战:技术、架构、实施与应用》一3.2 如何选择解决方案...
- 威宝推出支持四接口的桌面硬盘新品
- 为什么现在腿会抽筋了?
- leetcode 437. Path Sum III | 437. 路径总和 III(DFS,前缀和)
- CentOS下Hive2.0.0集群模式安装详解
- java任务分支和合并_合并/分支战略
- H3C 以太网集线器
- 推荐一条高效的Python爬虫学习路径!
- ubuntu安装python下载包_Ubuntu安装Python的包管理工具Pip
- Axure RP9 自学之路1-软件初识
- python2和python3中的unicode
- Restorator 导致win8或win8.1 打开程序提示不支持此接口的解决方法
- maven项目打包命令
- 怎么把外部参照合并到图纸_如何在CAD制图中将两个图合并到一个图纸上
- 知识点 —— Python基础-1
- 怎样组建家庭计算机网络,不要再求人了,教你最详细的家庭网络组建方法。
- 系统架构设计笔记(91)—— 安全性规章
- Arturia ARP 2600 V3 for Mac - 音响模拟合成工具
- 【机器学习算法】隐马尔可夫模型HMM(一)
- 膨胀卷积(DILATED CONVOLUTIONS)