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

Posted 2023-03-22

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

【英文标题】：Display dynamic PDF from network drive in React App with Node server

【发布时间】：2021-11-22 23:24:37

【问题描述】：

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

首先，我尝试将iFrame的source属性直接设置为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))

当新窗口打开时，出现错误提示“加载 PDF 文档时出错。”。

我做错了什么？我很感谢任何建议。

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

【参考方案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);
    )
)