javascript - 下载内容类型为 Content-Type :multipart/mixed 的文件

Question

我正在做一个 Angular 应用程序，我必须到达休息终点并下载作为响应发送的文件，但我不明白如何去做。我有如下响应 header

Content-Disposition:attachment; filename="Config.zip" Content-Type:multipart/mixed;boundary=Boundary_25_1816124633_1519993185650 MIME-Version:1.0 Transfer-Encoding:chunked

响应看起来像

--Boundary_25_1816124633_1519993185650 Content-Type: application/json

{"config":[{},{},{}]} --Boundary_25_1816124633_1519993185650 Content-Type: application/octet-stream

PKMÛJAä;%RecurrenceEvent_CreateContract_1.jsoníYKoãF¾ÈxÝ0è÷Ã7Mb L&íÝK0ͦCD¬1ðß(J¤HÙ²¼yV'»ÙU¬®úªú«â· ö«åºv~\Í~ùöýw³Ù,È«ù

编辑

这是我发送到后端的 http 调用

return this.http.get(url).map(response => {
// TODO
});

如何下​​载附件中的 zip 文件？请帮忙。我卡住了。

Answer 1

const executeSaveAs = (content) => {
    let blob = new Blob([content], {'type': "application/octet-stream"});
    saveAs(blob, "downloaded_zip.zip"); // This is from https://github.com/eligrey/FileSaver.js
};

return this.http.get(url, {responseType: 'arraybuffer'}).pipe(executeSaveAs);

我们需要设置预期的响应类型，我们希望它是“arraybuffer”。然后，我们为 FileSaver 做通常的事情，即创建一个 blob 并将其传递给包的 saveAs 函数。

编辑

根据评论，要求对多部分响应的各个部分进行解析。

关于多部分内容类型的信息

在 header 中定义的边界表示响应的不同部分。每个部分前面都有一行

--boundaryThatIsInTheHeader

方法

我们可以根据边界拆分响应。为此，我们必须首先从 header 中解析出边界。 RegEx 在这里拯救我们:

let boundaryRegex = new RegExp(/boundary=(\S+)/g);
const header = `Content-Disposition:attachment; filename="Config.zip" Content-Type:multipart/mixed;boundary=Boundary_25_1816124633_1519993185650 MIME-Version:1.0 Transfer-Encoding:chunked`; // As in the question

const boundary = '--' + boundaryRegex.exec(header)[1]; // We obtain the boundary here

现在，我们需要以边界作为分隔符来拆分响应。

response.split(边界);

服务器的这个特定响应的返回值是

[ "", "Content-Type: application/json\n\n {\"config\":[{},{},{}]} ", "Content-Type: application/octet -stream\n\n PKMÛJAä;%RecurrenceEvent_CreateContract_1.jsoníYKoãF¾ÈxÝ0è÷Ã7Mb L&íÝK0ͦCD¬1ðß(J¤HÙ²¼yV'»ÙU¬®úªú«â·ö«åºv~Í~ùöýw³Ù,È«ù"]>/p>

注意数组的第二个元素，即 JSON。这就是我们想要的!我们现在可以使用简单的 RegEx 删除额外的数据，即内容类型。如果响应的格式是不变的，我们也可以直接根据索引删除它。 zip 文件的内容也是如此。