使用 Node 服务器在 React App 中显示来自网络驱动器的动态 PDF

Question

我无法在我的 React 应用程序中显示位于网络驱动器上的 pdf 文件。

首先，我尝试直接将iFrame的来源属性设置为pdf所在路径。尝试这个，我得到一个错误，chrome 由于安全原因不会加载本地资源。

经过一些研究，我尝试在节点服务器上获取文件并将其发送到客户端。这就是我现在被困的地方。

我在服务器端的部分代码：

function getTestDoc(req, res, next) {

  var file = fs.createReadStream("R:\Test.pdf")
  res.contentType("application/pdf");
  res.sendFile(file);
}

我在客户端的部分代码：

function getTestDoc() {
  const requestOptions = {
    method: 'GET',
    responseType: "blob",
    headers: authHeader(),
  };

  return fetch(`${apiUrl}/mo/gettestdoc`, requestOptions)
  .then((response) => {
    const file = new Blob([response.body], {type: "application/pdf"})
    const fileUrl = URL.createObjectURL(file)

    window.open(fileUrl))
}

打开新 Window 时，出现“加载 PDF 文档时出错”的错误。

我做错了什么？非常感谢您的任何建议。

PS: 服务器和客户端之间的一般连接正常。

Answer 1

终于找到答案了

服务器端代码：

filePath = "\\servername\path\Test.pdf"
var file = fs.createReadStream(filePath)
var stat = fs.statSync(filePath);
res.setHeader('Content-Length', stat.size);
res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', 'inline; filename=Test.pdf');
file.pipe(res);

客户端代码：

return fetch(`${apiUrl}/mo/gettestdoc`, requestOptions)
  .then((response) => {
    response.blob()
    .then(blob => {
      const fileUrl = URL.createObjectURL(blob)
      window.open(fileUrl);
    })
})

使用 Node 服务器在 React App 中显示来自网络驱动器的动态 PDF

Display dynamic PDF from network drive in React App with Node server

node.js

reactjs

pdf

blob

fs