簡體   English   中英

在 Ajax POST Nodejs Express 上推送文件下載

[英]Push File Download on Ajax POST Nodejs Express

在節點服務器上我有這個代碼。 它基本上將瀏覽器 POST 數據發送到 api 服務器並接收文件作為塊數據,並且相同的數據通過 pipe 響應發送回瀏覽器。 但問題是 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)            
    }
);

客戶端代碼...這是嘗試創建一個 blob 並在 urlObject 上使用它。 但是當我簽入十六進制時,下載的文件已損壞。

$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(); 
}

那么有什么解決方案嗎? 在 NodeJs 端或瀏覽器上

更新: https://stackoverflow.com/a/7969061/7078299

該線程說很難將 ajax 請求轉換為下載文件。 所以我需要在客戶端上使用 urlobject。 但是 blob 不能使用 stream 數據。 如何解決

您可以使用名為file-saver的節點模塊並使用它提供的saveAs方法並在客戶端下載文件。

首先npm install file-saver

您可以將其用作

import {saveAs} from 'file-saver';

在您的then塊中,您需要添加此行

saveAs(new Blob([response]), <your file name>)

它會自動下載您的文件。

我通過在客戶端代碼上添加一個響應類型來解決這個問題。 現在 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM