在 React 中提供 PDF

Question

我目前在我的 localhost 上的端口 8080 上有一个前端 React 应用程序，在端口 9000 上有一个后端 Express 服务器（我认为这些必须是不同的端口，但我可能错了）。 我的目标是在我的网页上有链接，将 PDF（或其他文件，如 Excel 表）下载到用户的本地计算机，但我不确定如何 go 关于此。

如果我在 Express 服务器端有 PDF，我想到了 2 个选项

1. 在 Express 中创建一个 static 文件夹，其中包含所有文件

const app = express();
app.use('/static', express.static(path.join(__dirname, 'MyPDFs')));

然后在我的 React 应用程序中使用用户锚标记来指向我需要的文件

<a href="http://localhost:9000/static/myFile.pdf">Link to PDF </a>

2. 在 Express 中设置路由并发送响应下载

var express = require("express");
var router = express.Router();

/* GET home page. */
router.get("/static", function (req, res, next) {
  res.download("MyPDFs/myFile.pdf");
});

然后使用fetch或axios package 从 React 发出 Http 请求，就像我从这个链接

axios({
  url: 'http://localhost:9000/static',
  method: 'GET',
  responseType: 'blob',
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});

但是这个解决方案似乎不是很干净，因为我读到浏览器本身不支持从请求中下载文件，我需要 3rd 方包来做到这一点。

另一个完整的选择是将这些文件放在前端 React 应用程序的目录中，但我不希望这样做。 我更愿意将这些 PDF（或 Excel 等其他文件）保留在服务器端，并以某种方式从 React 中检索这些文件。 当用户单击链接时，我不一定需要下载这些文件（尽管那是可取的），但至少要让它显示在浏览器中。

这种情况的“最佳实践/标准”方法是什么？ PDF 文件 go 在服务器端还是客户端？ 我应该简单地链接到另一个端口上的文件还是发送 Http 请求或其他什么？ 先感谢您。

Answer 1

https://blog.logrocket.com/programmatic-file-downloads-in-the-browser-9a5186298d5c/这可能对您有用。

HTML5 将下载属性引入标签。

虽然不是每个浏览器都支持它，但您会发现您可能永远不会遇到使用过时浏览器的用户（当然首先检查兼容性）。

我的方法是将文件上传到存储提供商并使用类似于链接的方法从那里下载内容/CDN。 我会使用我的前端将文件发送到我的 API，确保在将其上传到我的存储机制之前对其进行验证/验证。

但是，这会带来复杂性和成本，因此我不确定它是否适合您的应用程序。 我当然不能说它是否是标准。

这也不能真正回答你的问题，我会坚持你目前的方法，不要太担心最好的方法，直到你目前的方法不够好。

也只需安装您的 static 文件夹，以便可以提供服务而不是处理路线。

https://expressjs.com/en/starter/static-files.html

重新阅读您的问题后，您可以说这将是两种方法的组合，从前端下载，而不将文件存储在 React 中。

最后，您不需要进行 fetch 或 axios 请求，您只需要知道文件的位置，浏览器将通过 HTML5 标签处理下载，省去了额外的网络调用

TL;博士：

1. 将 Express 与静态挂载的目录一起使用
2. 从 React 上传文件到 Express，放置在 static 目录中
3. 使用 React 将位置链接到 Html 标签中的下载属性
4. 下载

当您处理规模时，我建议您选择第 5 步：

5. 使用 Express 将内容上传到可以使用 CDN 提供服务的 static 存储机制。