返回下载文件的 post 请求

Question

我正在将数据发送到我的服务器，该服务器根据请求创建一个pdf文件，该文件创建得很好，但我无法将文件发送回客户端。我正在使用 React 提交表单

handleSubmit(event) {
event.preventDefault();
var body = {
id: this.state.id,
text: this.state.text
}
fetch('http://localhost:5000/pdf', {
method: 'POST',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json'
},
}).then(function(file) {
window.open(file.url);
});
}

它的开场 http://localhost:5000/pdf，但由于我没有 GET 路由，因此无法下载任何内容。这是我的开邮路线

router.post('/pdf', async function(req, res) {
var makePdf = require('./file-create/pdf.js');
makePdf(req, res);
});

并且文件将作为pdfDoc.pipe(res);返回

我不能只使用 GET 路由，因为我无法以这种方式发送数据，我怎样才能让这个文件发送到客户端？

Answer 1

您在使用window.open时调用 GET 请求。这将在包含 URL 的新选项卡中打开 URL。当您将其从 GET 更改为 POST 时，这将不起作用。

若要解决此问题，可以使用downloadjs(https://www.npmjs.com/package/downloadjs( 来下载从服务器返回的 Blob。

我在下面包含了一些示例代码。这包括带有获取请求的索引.html文件和用于返回简单 pdf 的服务器.js。

索引.html

var body = {
id: 1,
text: 'hello world',
};
fetch('/download', {
method: 'POST',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json'
},
}).then(function(resp) {
return resp.blob();
}).then(function(blob) {
return download(blob, "CUSTOM_NAME.pdf");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

服务器.js

var express = require('express');
var app = express();
app.post('/download', function(req, res){
res.download('./make-file/whatever.pdf');
});
app.listen(3000);