Javascript 无法使用Express和Node Js打开从服务器下载的pdf文件

我正在尝试将服务器上托管的pdf文件发送到客户端，以便从浏览器下载。我正在使用express和node js

服务器上的代码是：

app.get('/files', async (req, res) => {
     res.sendFile(__dirname + '/boarding-pass.pdf');
    });

客户端（react js）上的代码是：

consthandleclick=async（）=>{
常数响应=等待axios({
网址：'http://localhost:4000/files',
//url:“/static/boarding pass.pdf”，
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/pdf”，
“授权”：“基本d29vZG1hYzpXb29kbWFjOTI3IQ==”
},
响应类型：'arraybuffer'，
//responseType:'blob'，//重要
});
console.log（'response'，response）；
constURL=window.url.createObjectURL（新Blob（[response.data]）；
const link=document.createElement（'a'）；
link.href=url；
link.setAttribute（'download'，'bp.pdf'）；
document.body.appendChild（链接）；
link.click（）；
}
导出默认值（）=>handleClick（）}>下载文件

如果我尝试在服务器上打开该文件（我在Mac上），该文件将正确打开，并且我可以看到内容。但是，当我从浏览器下载文件时，它会以某种方式损坏或被截断，或者缺少某些内容，因为我无法打开它，并且我收到的信息是，它不是有效的文件，尽管我可以看到文件系统中两个文件的大小相同，但是如果我使用实用程序检查二进制文件，我可以看到两个文件都不一样

有人能告诉我我遗漏了什么或提供一个小的工作示例吗

---

谢谢

我认为您应该更改服务器实现，并执行以下操作：

var express=需要（“express”）； var-app=express（）

应用程序使用（express.static（'public'））； 应用程序使用（express.static（'images'））

app.listen（3000）

---

然后请求host:3000/bp.pdf，该文件应位于节点应用程序根目录下的public，images文件夹中。

您可以尝试使用Blob的替代方法

在链接的href中设置数据类型：

link.setAttribute('href', 'data:application/pdf;base64,' + text);

或

或者，如果您仍然收到损坏的文件，请对您的内容进行编码：

link.setAttribute('href', 'data:application/pdf;charset=utf-8,' + encodeURIComponent(text));

如果是我经常使用的文本：

link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));

下载文件后，不要忘记删除dom对象：

document.body.removeChild(link);

这是完整的代码：

let link= document.createElement('a');
link.setAttribute('href', ''data:application/pdf;base64,' + text);
link.setAttribute('download', 'bp.pdf');
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // Remember to remove the dom object after downloading the file

这是一个用base64编码的pdf显示此功能的小提琴：

---

应该可以有一个端点将文件从服务器发送到客户端，而无需将所有文件都放在公用文件夹中。因为如果我想让文件仅对某些经过身份验证的用户可用，那该怎么办？请为请求的文件使用特定路径，并在使用回调中的静态函数之前提供您选择的身份验证模型。您要下载的文件有多大？178Kb，不是大文件。对于更大的，我尝试创建一个流，并将流输送到响应中。同样的问题。我添加了一个备选答案，看一看，让我知道它是否仍然适用于同样的问题。你有一个小pdf文件的工作示例吗？您是否能够从服务器获取文件、将文件发送到浏览器、下载并正常打开？对于我来说，只有当我将文件放入公用文件夹并直接引用它时，它才起作用。但在我看来，这不应该是解决办法opinion@fgonzales是的，我添加了一个小提琴，显示了文件的基本下载。对于从服务器获取文件的情况，只需将其编码为base64，返回该值（完整字符串），并用该值替换我的答案中的变量

text

。

document.body.removeChild(link);

let link= document.createElement('a');
link.setAttribute('href', ''data:application/pdf;base64,' + text);
link.setAttribute('download', 'bp.pdf');
document.body.appendChild(link);
link.click();
document.body.removeChild(link); // Remember to remove the dom object after downloading the file