Question

我正在为我的一个项目使用角度2/4，我处于一种情况，我必须下载提交请求的文件。我现在正在做。

this._http.post('url', body, { headers: urlEncodedHeader, observe: 'response', responseType: 'arraybuffer' })
            .subscribe((data) => {

                let blob = new Blob([data.body], { 'type': 'application/octet-stream' });
                saveAs(blob, 'file.zip');
            })

文件大小可能非常大，所以我希望浏览器处理请求，而不是解析数据并在应用程序端创建blob。所以我在某处读到我们可以动态创建表单元素并将句柄提供给浏览器，而不是让应用程序处理blob并存储在内存中。所以我试过

post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");
        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for (var key in params) {
            if (params.hasOwnProperty(key)) {
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("type", "hidden");
                hiddenField.setAttribute("token", key);
                hiddenField.setAttribute("value", params[key]);

                form.appendChild(hiddenField);
            }
        }
        document.body.appendChild(form);
        form.submit();
    }

这似乎不起作用，页面总是重定向到某个错误页面。所以我的查询是，如何在不挂起浏览器的情况下下载大文件。请帮忙。

Answer 1

问题是我在做什么

hiddenField.setAttribute("token", key);

而不是

hiddenField.setAttribute("name", key);

更改名称解决了我的问题

Answer 2

也许只需在post上生成下载文件的链接：

this._http.post('url', body, { headers: urlEncodedHeader, observe: 'response', responseType: 'arraybuffer' })
            .subscribe((data) => {

              let link = data.body; // //http://path/to/file;
              window.open(link);

              // or
            var link = document.createElement('a');
            link.href = link 
            link.click();
            });

提交动态创建的表单

2 个答案: