如何使用JavaScript触发直接下载PDF _PDF

本文概述

要求
从URL直接下载PDF

在当今的大多数Web应用程序中, 由于Web应用程序提供的基本要求和功能, 用户并未使用过时的浏览器。当我们谈论技术方面时, 这是一个很大的优势, 因为你有许多可用的新API。优点之一是Blob和FileReader的可用性, 它们工作正常, 可用于直接从JavaScript下载文件, 而无需将用户重定向到新网站。
在本文中, 我们将向你说明如何轻松地从浏览器中的Web URL直接下载PDF。
注意【如何使用JavaScript触发直接下载PDF】对于示例, 我们将使用Mozilla Github IO网站上托管的PDF, 该PDF是完全免费的, 并且具有CORS标头, 因此可以在任何地方进行测试。
要求你将需要FileSaver库来实现你的目标。该库支持UMD(通用模块定义), 因此你可以在浏览器中使用它, 并从窗口访问它, 也可以将其作为任何捆绑器的模块。
如果使用NPM, 则可以使用以下方法将其安装在项目中：

npm install file-saver --save

然后, 你可以只需要以下模块：

var FileSaver = require('file-saver'); var blob = new Blob(["Hello, world!"], {type: "text/plain; charset=utf-8"}); FileSaver.saveAs(blob, "hello world.txt");

或者, 你可以下载缩小的脚本的副本, 并使用script标记添加到HTML文档中：

< !-- Include the script from a local copy --> < script src="http://www.srcmini.com/FileSaver.min.js"> < /script>

并像这样使用它：

var blob = new Blob(["Hello, world!"], {type: "text/plain; charset=utf-8"}); saveAs(blob, "hello world.txt");

请访问Github上的官方存储库, 以获取有关此库的更多信息。
从URL直接下载PDF多亏了FileSaver.js, 你可以轻松在浏览器中将文件数据保存为JavaScript下载。 FileSaver.js在本机不支持它的浏览器中实现saveAs FileSaver接口。 FileSaver.js是在客户端保存文件的解决方案, 非常适合需要生成文件的Web应用程序, 或者用于保存不应发送到外部服务器的敏感信息。
在这种情况下, 如果你想通过服务器上可用的PDF来执行此操作, 但是由于某种原因你不想为此打开新窗口, 那么用户就无需右键单击, 保存PDF等, 你可以轻松地使用此库来实现它。在以下示例中, 我们从一个简单的URL下载PDF, 根据你应用程序的体系结构, 该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 XMLHttpRequestoReq.open("GET", URLToPDF, true); // Important to use the blob response typeoReq.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 API, 则可以添加polify来解决此不便之处。
编码愉快！