Question

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

服务器上的代码是：

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

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

const handleClick = async () => {
    const response = await axios({
        url: 'http://localhost:4000/files',
       // url: '/static/boarding-pass.pdf',
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/pdf',
            'Authorization': 'Basic d29vZG1hYzpXb29kbWFjOTI3IQ=='
        },
        responseType: 'arraybuffer',
        //responseType: 'blob', // important
    });

console.log('response', response);
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'bp.pdf');
    document.body.appendChild(link);
    link.click();
}

export default () => <div><Button onClick={() => handleClick()}>Download file</Button></div>

如果我尝试在服务器上打开文件（在Mac上为Mac），则文件已正确打开，并且看到了内容。但是，当我从浏览器下载文件时，它由于某种原因被损坏或截断，或者丢失了一些东西，因为我无法打开它，并且我收到一条消息，它不是有效文件，尽管我可以看到文件系统中两个文件的大小相同，但是如果我使用实用程序检查二进制文件，则可以看到两个文件都不同。

有人可以告诉我我所缺少的内容还是提供一个小的工作示例？

谢谢

Answer 1

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

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

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

或

link.setAttribute('href', 'data:application/octet-stream;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显示此功能的小提琴：

Fiddle

Answer 2

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

var express = require（'express'）; var app = express（）;

app.use（express.static（'public'））; app.use（express.static（'images'））;

app.listen（3000）;

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

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

2 个答案: