在React中提供PDF

Question

我目前在本地主机上的端口8080上有一个前端React应用程序，在端口9000上有一个后端Express服务器（我认为这些端口必须是不同的端口，但是我可能错了）。我的目标是要在我的网页上建立链接，该链接会将PDF（或其他文件，如Excel工作表）下载到用户的本地计算机上，但是我不确定该怎么做。

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

1. 在Express中创建一个包含所有文件的静态文件夹

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包从React发出Http请求，就像我从link中找到的那样>

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();
});
但是这种解决方案似乎不太干净，因为我已经阅读到浏览器本身并不支持从请求中下载文件，并且我需要第三方软件包来做到这一点。

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

在这种情况下，“最佳做法/标准”方法是什么？ PDF文件是放在服务器端还是客户端上？我应该直接链接到另一个端口上的文件还是发送Http请求，或者其他？预先谢谢你。

我目前在本地主机上的端口8080上有一个前端React应用程序，在端口9000上有一个后端Express服务器（我认为这些端口必须是不同的端口，但是我可能错了）。我的目标是在...

Answer 1

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