我正在尝试将 pdf 文件从节点服务器下载到反应客户端,但是当我打开它时,它显示为空白

Posted

技术标签:

【中文标题】我正在尝试将 pdf 文件从节点服务器下载到反应客户端,但是当我打开它时,它显示为空白【英文标题】:I'm trying to download a pdf file from a node server to a react client but when I open it, it shows blank 【发布时间】:2019-10-05 09:44:29 【问题描述】:

我只是从节点的文件中读取数据并将内容类型发送为“应用程序/pdf”。

我的节点版本是 10。

serverside.js:

var file = path.join(__dirname,'Rajesh.pdf');
fs.readFile(file, function(err, data)
    res.contentType("application/pdf");
    res.send(data)
)

clientside.js:

axios.get('/api/downloadcv')
      .then(res => 
        const url = window.URL.createObjectURL(new Blob([res.data]
          ,type: "application/pdf"))
        var link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'resume.pdf');
        document.body.appendChild(link);
        link.click();
      )

pdf 正在下载,但什么也没显示,当我用 Vs Code 打开它时,它向我显示了这样的内容:

%PDF-1.4 %äüöß 2 0 obj <</Length 3 0 R/Filter/FlateDecode>> stream x��\K�d�m������n�u�F���Ad�d

【问题讨论】:

为什么要把pdf内容放到dom上?一个简单的在新窗口中打开或下载属性会做同样的事情 【参考方案1】:

只需将responseType 添加为具有值arraybuffer 的标头。你应该很高兴。

axios.get('/api/downloadcv', responseType: 'arraybuffer')

希望对你有帮助!!!

【讨论】:

哇...非常感谢? 为什么没有人说这个作为答案。这一天我一直在工作。 兄弟你救了我的命,浪费了大约 12 个小时。 你拯救了一天

以上是关于我正在尝试将 pdf 文件从节点服务器下载到反应客户端,但是当我打开它时,它显示为空白的主要内容,如果未能解决你的问题,请参考以下文章

如何将值从反应本机应用程序传递到节点 js 后端

下载pdf失败,提示检查服务器连接还怎么解决

如何通过 Axios 将复杂对象从反应发布到节点?

将进度条添加到下载文件[重复]

如何从服务器端下载 zip 文件到客户端(django 做出反应)

反应节点通过 axios 传递文件与 multer 错误 500