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

本文概述

• 要求
• 从URL直接下载PDF

在当今的大多数Web应用程序中, 由于Web应用程序提供的基本要求和功能, 用户并未使用过时的浏览器。当我们谈论技术方面时, 这是一个很大的优势, 因为你有许多可用的新API。优点之一是Blob和FileReader的可用性, 它们工作正常, 可用于直接从JavaScript下载文件, 而无需将用户重定向到新网站。

在本文中, 我们将向你说明如何轻松地从浏览器中的Web URL直接下载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="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 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 API, 则可以添加polify来解决此不便之处。

编码愉快！