使用d3-fetch(d3.js v5)下载文件

时间:2019-01-31 08:43:25

标签: d3.js

我正在尝试:
1)找到一种方法,使d3.blob和d3.buffer的响应在用户浏览器的POST调用文件下载对话框中显示。
2)获取响应的HTTP代码。

我能够使用d3.blob和d3.buffer从Servlet上发布数据,并使Servlet将压缩后的数据发送回浏览器。 google-chrome开发人员工具的“网络”->“标题”标签在“响应标题”下显示以下文本

Content-Disposition: attachment; filename="20190131_1040_48_757000.zip"
Content-Type: application/zip
Date: Thu, 31 Jan 2019 07:40:48 GMT
Transfer-Encoding: chunked

“网络响应”显示似乎是二进制数据,显示为一系列二进制字符以及偶发的红点字符。

似乎预期的数据已按预期以二进制数据发送,我现在的挑战是“说服”浏览器将这些数据显示为可下载的.zip文件。 下面显示了我用来执行帖子和检索响应的javascript代码的简化版本。要在响应时生成文件下载对话框,需要对此代码进行哪些更改? 什么是发布数据(使用AJAX)和通过下载文件对话框检索数据的更好方法? 在d3-fetch(d3.blob或d3.buffer)下,是否可以确定响应的HTTP状态代码?

function download_processed__data()
{
    var date=null;
    var queryId="abc";
    var some__ids=[1,2,3,4,5];
    var request_data=[
        {
            "queryId":queryId
            ,"offset":0
            ,"limit":10000000
            ,"some__ids":some__ids
        }
    ];

    var url_string=null;
    url_string="/FE/FE/some_endpoint.worker/"+queryId+"/123/processed_data.zip";
    //window.open(url_string);
    d3.buffer(
        url_string
        ,{
            body:JSON.stringify(
                request_data
            )
            ,headers: {"content-type": "application/zip"}
            ,method: "POST"
            ,mode: "cors"
            //,mode: "navigate"
        }
    )
    .then(
        function(data)
        {
            console.log((date=new Date()).toLocaleString()+", at download_processed__data() then() part, some__ids is:'"+JSON.stringify(some__ids)+"'");
            ////
            var link=document.createElement('a');
            link.href=window.URL.createObjectURL(data);
            link.download="processed_data."+queryId+".zip";
            link.click();
            document.body.removeChild(link);
            ////
        }
    )
    .catch(
        function(error)
        {
            console.log((date=new Date()).toLocaleString()+", at download_processed__data() catch() part, some__ids is:'"+JSON.stringify(some__ids)+"'");
        }
    )
    ;
}

我具有以下javascript导入。

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>        

0 个答案:

没有答案