前端用js-file-download 组件下载后端返回的 pdf、word、excel 文件

2024-01-10 18:23:01

如何使用js-file-download 组件轻松下载文件

简介

在开发网络应用程序时，经常需要从后端下载文件，例如 PDF、Word 和 Excel 文档。js-file-download 组件提供了一种简单易用的方法，可以在前端实现文件下载功能。

安装js-file-download 组件

安装 js-file-download 组件非常简单。您可以使用 npm 或 yarn 包管理器：

npm install js-file-download

或

yarn add js-file-download

安装完成后，在需要使用该组件的页面中引入它：

<script src="path/to/js-file-download.js"></script>

使用js-file-download 组件下载文件

js-file-download 组件提供了两个主要方法来下载文件：

save()：将文件保存在本地计算机上。
download()：在浏览器中打开文件。

语法如下：

save(blob, filename, options)
download(blob, filename, options)

其中：

blob：要下载的文件的 Blob 对象。
filename：下载的文件的名称。
options：可选的选项对象，可以自定义下载行为。

以下示例展示了如何使用 save() 方法下载 PDF 文件：

const blob = new Blob([data], { type: 'application/pdf' });
jsFileDownload.save(blob, 'document.pdf');

以下是使用 download() 方法在浏览器中打开 Word 文件的示例：

const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
jsFileDownload.download(blob, 'document.docx');

处理后端返回的文件流

在后端，您需要将文件转换为 Blob 对象并将其返回给前端。以下是如何在 Node.js 中使用 Express 框架返回 PDF 文件的示例：

const express = require('express');
const app = express();

app.get('/download-pdf', (req, res) => {
  const pdfFile = fs.readFileSync('document.pdf');
  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'attachment; filename="document.pdf"');
  res.send(pdfFile);
});