如何在express路由响应中发送PDF并强制浏览器下载

在本文中，我们将看到如何在express路由的响应中发送PDF文件，并使浏览器强制下载该文件。

方法：

加载所需的包，然后创建一个express应用程序。
定义主页和PDF下载请求的路由。
创建一个index.html文件，其中包含一个下载PDF的按钮。
单击按钮执行ajax请求以获取PDF。
在ajax调用的成功回调中，将接收到的PDF文件从blob格式转换为PDF格式。
现在，为了使浏览器强制下载PDF：
a. 创建一个隐藏的<a>标签。
b. 使用window.URL.createObjectURL()方法创建文件的引用。
c. 将其href属性设置为blob的URL。
d. 将其download属性设置为文件名。
e. 点击<a>标签。
f. 从DOM中移除该<a>标签。
g. 释放现有的对象URL（对于文件的引用），通知浏览器不再保留文件的引用。

步骤1：安装必要的包

首先，安装以下Node.js包。

npm install --save express

步骤2：创建基本的 Express 服务器设置

创建一个名为 app.js 的文件，并按照下面所示的代码进行编写。

App.js

// Load necessary packages 
const express = require("express"); 
  
// create an express app 
const app = express(); 
  
// define PORT number to listen to the requests 
const PORT = process.env.PORT || 3000; 
  
// to serve files from uploads directory 
app.use("/uploads", express.static("uploads")); 
  
// express routes 
app.use("/", require("./routes")); 
  
// listen to requests 
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));

步骤3：为应用程序定义路由

创建一个名为 routes.js 的文件，并按照下面显示的代码进行编写。

routes.js

// Load necessary packages 
const express = require("express"); 
  
// express router  
const router = express.Router(); 
  
// respond with index.html when a GET request is made to the homepage 
router.get("/", (req, res) => { 
    res.sendFile(__dirname + "/views/index.html"); 
}); 
  
// route for handling PDF request 
router.get("/downloadPDF", (req, res) => { 
    res.download("uploads/Resume.pdf"); 
}); 
  
// export router middleware and use it in app.js 
module.exports = router;

步骤4：运行服务器

现在使用以下命令启动你的express服务器：

node app.js

步骤5: 打开浏览器并输入URL

打开您喜爱的浏览器，在地址栏中输入 http://localhost:3000/downloadPDF 然后按下回车键，Resume.pdf 文件将自动下载。

输出:

如何在express路由响应中发送PDF并强制浏览器下载

步骤6：通过按钮使PDF可下载。

您可以通过在按钮上添加点击事件监听器，然后使用ajax请求上面的URL，使浏览器在点击按钮时下载PDF文件。

要在按钮点击时下载PDF文件，首先创建一个包含以下内容的 index.html 文件：

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8" /> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 <meta name="viewport" 
       content="width=device-width, initial-scale=1.0" /> 
 <link
  href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity= 
"sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
  crossorigin="anonymous"
 /> 
</head> 
<body> 
 <div class="container"> 
  <button id="download" class="btn btn-primary my-5"> 
   Download PDF 
  </button> 
 </div> 
 <script src= 
"https://code.jquery.com/jquery-3.6.0.js"
         integrity= 
"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"> 
 </script> 
 <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
         integrity= 
"sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
  crossorigin="anonymous"> 
 </script> 
  
 <script> 
   $("#download").click(function (e) {$ .ajax({ 
    type: "GET", 
    url: "/downloadPDF", 
    xhrFields: { 
     // specify response type as "blob" to handle objects 
     responseType: "blob", 
    }, 
    success: function (data) { 
  
     // creating a hidden <a> tag 
     var a = document.createElement("a"); 
  
     // creating a reference to the file 
     var url = window.URL.createObjectURL(data); 
  
     // setting anchor tag's href attribute to the blob's URL 
     a.href = url; 
  
     // setting anchor tag's download attribute to the filename 
     a.download = "Resume.pdf"; 
     document.body.append(a); 
  
     // click on the <a> tag 
     a.click(); 
  
     // after clicking it, remove it from the DOM 
     a.remove(); 
     // release an existing object URL which was previously  
     // created by calling URL.createObjectURL() 
     // once we have finished using an object URL, let the 
     // browser know not to keep the reference to the file any longer. 
     window.URL.revokeObjectURL(url); 
    }, 
    error: function (result) { 
     alert("error"); 
    }, 
   }); 
  }); 
 </script> 
</body> 
</html>

输出：

如何在express路由响应中发送PDF并强制浏览器下载