Res.download()处理html表单提交，而不是Axios post调用
我正在编写一个小应用程序，它将信息从React应用程序提交到Express服务器的"/download“API，然后它将一个新文件写入本地文件系统，并使用fs.writeFile()回调中的Express res.download()将新创建的文件下载到客户端。
我一直使用常规的html表单提交来发布数据，但由于复杂性的增加，我改用Axios，它不再起作用。
奇怪的是，只有客户端的下载似乎停止了工作。写文件很好，所有的控制台日志都是一样的(“文件已下载！”下面的日志)。当我切换回表单提交时，它继续工作，所以唯一的变化是使用Axios发送post请求。据我所知，一旦数据到达那里，两者之间应该没有任何区别，但我希望有人比我更了解这一点。
除了在表单和Axios post请求之间进行测试之外，我还尝试将Axios请求的内容类型从"application/json“更改为"x-www- form -urlencoded”，认为将内容类型与表单发送的内容相匹配可能是答案
以下是该应用程序的相关代码片段：
server.js (节点JS)
app.post('/download', (req, res) => {
console.log("Requst data");
console.log(req.body.html);
fs.writeFile("./dist/test.txt", res.body.test,
(err) => {
if(err) {
return console.log(err);
} else{
console.log("The file was saved!");
}
let file = __dirname + '/text.txt';
/*This is the issue, the file is not downloading client side for the Axios iteration below*/
res.download(file,(err)=>{
if(err){
console.log(err);
} else {
console.log(file);
/*This logs for both View.js iterations below*/
console.log("File downloaded!");
}
});
});
})App.js (React)
handleSubmit(e){
e.preventDefault();
axios.post(`/download`, {test: "test"})
.then(res => {
console.log("REQUEST SENT");
})
.catch((error) => {
console.log(error);
});
}
render(){
return(
<div>
<View handleSubmit={this.handleSubmit} />
</div>
)
}View.js (React)
这是可行的：
render(){
return(
<form action="/download" method="post">
<input type="submit">
</form>
)
}这不会在客户端启动下载，但在其他方面工作正常：
render(){
return(
<form onSubmit={this.props.handleSubmit}>
<input type="submit">
</form>
)
}我没有得到任何错误，一切似乎都正常工作，除了客户端的下载。
预期的结果是使用Axios在客户端下载文件，但事实并非如此。
更新: Bump，没有得到任何牵引力
回答 2
Stack Overflow用户
发布于 2019-06-19 13:51:00
实际上，你可以在Ajax POST请求中下载文件，只需一些blob操作。示例代码如下所示，并附有说明注释：
handleSubmit(e){
var req = new XMLHttpRequest();
req.open('POST', '/download', true); // Open an async AJAX request.
req.setRequestHeader('Content-Type', 'application/json'); // Send JSON due to the {test: "test"} in question
req.responseType = 'blob'; // Define the expected data as blob
req.onreadystatechange = function () {
if (req.readyState === 4) {
if (req.status === 200) { // When data is received successfully
var data = req.response;
var defaultFilename = 'default.pdf';
// Or, you can get filename sent from backend through req.getResponseHeader('Content-Disposition')
if (typeof window.navigator.msSaveBlob === 'function') {
// If it is IE that support download blob directly.
window.navigator.msSaveBlob(data, defaultFilename);
} else {
var blob = data;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = defaultFilename;
document.body.appendChild(link);
link.click(); // create an <a> element and simulate the click operation.
}
}
}
};
req.send(JSON.stringify({test: 'test'}));
}对于后端，没有什么特别的，只是一个简单的res.download语句：
app.post('/download', function(req, res) {
res.download('./example.pdf');
});对于axios，前端代码将如下所示：
axios.post(`/download`, {test: "test"}, {responseType: 'blob'})
.then(function(res) {
...
var data = new Blob([res.data]);
if (typeof window.navigator.msSaveBlob === 'function') {
// If it is IE that support download blob directly.
window.navigator.msSaveBlob(data, defaultFilename);
} else {
var blob = data;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = defaultFilename;
document.body.appendChild(link);
link.click(); // create an <a> element and simulate the click operation.
}
})
.catch((error) => {
console.log(error);
});Stack Overflow用户
发布于 2019-06-19 05:09:49
浏览器不会将POST请求的响应作为文件下载进行处理，因此您需要发出另一个请求或以不同的方式处理响应。
下面是发出另一个请求的示例，即在后端创建文件后获取该文件。另一个答案提供了使用Blob API直接处理来自POST请求的响应数据的一个很好的示例。
axios.post(`/download`, {test: "test"})
.then(res => {
console.log("REQUEST SENT");
// Send back an identifier, or whatever so that you can then
// retrieve the file with another request.
// res.id is hypothetical, you simply need to be able to access the file
// whether by filename, id, however you want.
window.open("/download?id=" + res.id);
})
.catch((error) => {
console.log(error);
});https://stackoverflow.com/questions/56652397
复制相似问题