admin 管理员组文章数量: 887021
最近接了一个需求，要求用户点击下载按钮后直接下载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 browser
var file = new Blob([oReq.response], {
type: 'application/pdf'
});
// Generate file download directly in the browser !
saveAs(file, "mypdffilename.pdf");
};
oReq.send();
当文件下载结束的时候，保存程序会自动开始保存。
提醒一下哦，如果浏览器不支持Blob，可以使用这个补丁哦.
喜欢的同学可以去我的博客逛逛哦
版权声明：本文标题：使用js直接下载pdf文件而不用在新的浏览器窗口打开 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727324109h1101838.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论