将pdf文件从nodejs发送给用户到reactjs答案

【问题标题】：Sending pdf files to user from nodejs to reactjs将pdf文件从nodejs发送给用户到reactjs
【发布时间】：2019-10-21 13:31:42
【问题描述】：

我有 pdf 文档存储在服务器端的文件系统中。

我需要让用户在点击下载时下载其中一个。

问题是我知道如何将文件从 NodeJS 发送到浏览器，但这里的请求将由 ReactJS axios 请求发出。所以当我发送一个文件时，响应会去响应。如何将该pdf文件发送给用户？我是否可以使用我的前端代码直接访问文件系统？

当我在 NodeJS 中执行 res.sendFile(file_path) 后记录响应时，我在浏览器控制台中得到以下信息

我该如何处理才能让用户下载 pdf？

【问题讨论】：

您是否在使用像 Nginx 这样的反向代理，因为它针对共享静态文件进行了高度优化？
不，我没有使用 Nginx。实际上我的问题是以某种方式允许用户下载 pdf 文件，但由于请求是由 react 提出的，我不能让他下载文件。
你的最终目标是什么？
一旦用户点击下载，他/她应该能够下载存储在我的文件系统中的特定文件（无论我使用什么方法）。如果我不涉及服务器端是否可以（我不确定这是否正确）？
必须有 sendFile 选项作为响应，或者您可以将数据发送回客户端并在客户端生成 pdf

标签： node.js reactjs

【解决方案1】：

您可以使用file-saver 下载文件。以下是我用于 pdf 下载的功能。（response.data 是 nodejs 作为响应发回的 Buffer）

import FileSaver from 'file-saver';
...

_onPdfFetched() {
  FileSaver.saveAs(
    new Blob([response.data], { type: 'application/pdf' }),
    `sample.pdf`
  );
}

或者您可以只向用户显示 pdf

window.open(response.data, '_blank');

编辑

axios 调用应该是这样的：

axios.get(url, {
  responseType: 'arraybuffer',
  headers: {
      Accept: 'application/pdf',
  },
});

编辑 2

nodejs代码应该是这样的：

router.post('/api/downloadfile',(req, res, next) => {
  const src = fs.createReadStream('path to sample.pdf');

  res.writeHead(200, {
    'Content-Type': 'application/pdf',
    'Content-Disposition': 'attachment; filename=sample.pdf',
    'Content-Transfer-Encoding': 'Binary'
  });

  src.pipe(res); 
});

【讨论】：

确实会下载，但 pdf 内容完全失真。
我告诉过你，response.data 是 nodejs 作为响应发回的 Buffer。你应该从 nodejs 发送缓冲区
我搜索了很多，但我没有得到如何从节点发送文件缓冲区。我使用了 file.pipe() 和其他措施，但结果相同。有没有我可以参考的文档，或者你能告诉我在服务器端发送的缓冲区到底是如何的。
好的，我知道发生了什么。你正在做axios.post，而不是axios.get，这意味着选项应该是第三个参数（在调用后第二个参数是请求正文）。所以它应该是这样的：axios.post(url, {}, { responseType: 'arraybuffer', headers: { Accept: 'application/pdf'}})
其实我相信问题出在 axios 调用上。现在，关于我给你的nodejs代码，它是为了更好地使用管道来使用文件。可以看this article