[英]Push File Download on Ajax POST Nodejs Express
On Node Server i have this code.在节点服务器上我有这个代码。 Its basically sending the browser POST data to api server and recieves a file as chunk data and the same data is send back to browser via pipe response.它基本上将浏览器 POST 数据发送到 api 服务器并接收文件作为块数据,并且相同的数据通过 pipe 响应发送回浏览器。 But the issue is the api reponse is correct and i can write the file using nodejs locally but it doesnt push download file in browser但问题是 api 响应是正确的,我可以在本地使用 nodejs 编写文件,但它不会在浏览器中推送下载文件
router.post('/MyURLOnNODE', function (req, res) {
var MyJsonData = { some Data };
res.writeHead(200, {'Content-disposition': 'attachment; filename=fileArchive.tgz','Content-Type': 'application/force-download'});
try {
request({
url: 'SomeAPI Url', //URL to hit
method: 'POST',
json: MyJsonData
}).pipe(res);
} catch(e) {
console.log("Pipe error",e);
}
console.log("File Streaming Called ",MyJsonData)
}
);
Client Side Code...This was an attempt to create a blob and use it on urlObject.客户端代码...这是尝试创建一个 blob 并在 urlObject 上使用它。 but the downloaded file is corrupted when i checked in hex.但是当我签入十六进制时,下载的文件已损坏。
$http({
method: 'POST',
url: 'MyURLOnNODE',
data: PostData, //forms user object
headers: {
'Content-Type': 'application/json'
}
})
.then(function (data) {
var response=data.data;
var id = Flash.create('success', "Folder Archieved", 5000);
var a = document.getElementById('arch');
a.href = URL.createObjectURL(new Blob([response]));
a.download = "FolderMe.tgz";
a.type='application/octet-stream '
a.click();
}
So is there any solution to this?那么有什么解决方案吗? either on NodeJs Side or On browser在 NodeJs 端或浏览器上
Update: https://stackoverflow.com/a/7969061/7078299更新: https://stackoverflow.com/a/7969061/7078299
This thread says its hard to convert an ajax request to download file.该线程说很难将 ajax 请求转换为下载文件。 So i need to work on client on using urlobject.所以我需要在客户端上使用 urlobject。 But blob isnt working with stream data.但是 blob 不能使用 stream 数据。 How to solve it如何解决
You can use a node module called file-saver
and use saveAs
method provided by it and download the file on the client side.您可以使用名为file-saver
的节点模块并使用它提供的saveAs
方法并在客户端下载文件。
First npm install file-saver
;首先npm install file-saver
;
You can use it as您可以将其用作
import {saveAs} from 'file-saver';
and inside your then
block you need to add this line在您的then
块中,您需要添加此行
saveAs(new Blob([response]), <your file name>)
It will auto-download your file.它会自动下载您的文件。
i fixed the issue by adding a reponseType on Client Side Code.我通过在客户端代码上添加一个响应类型来解决这个问题。 Now the blob and ObjectUrl works correctly现在 blob 和 ObjectUrl 可以正常工作
$http({
method: 'POST',
url: 'MyUrl',
data: PostData, //forms user object
headers: {
'Content-Type': 'application/json'
},
responseType: 'arraybuffer'
})
.then(function (response) {
console.log(response);
var headers = response.headers();
var blob = new Blob([response.data],{type:headers['content-type']});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Archive.tgz";
link.click();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.