使用流下载带有身份验证令牌的大文件

Question

我正在尝试使用fetch下载文件，因为它需要在标题中进行身份验证。问题是，当文件太大时，用户不得不等待很长时间才能从浏览器获得任何反馈，直到它说文件实际上已下载为止，因此我尝试进行流保存，以使“下载”出现浏览器中的菜单，同时下载。

虽然它可以在Chrome上运行，但我现在面临的问题是Firefox似乎不支持Stream API，因此我尝试使用polyfill，但似乎不起作用。

import { createWriteStream, supported } from 'streamsaver';
import { WritableStream } from 'web-streams-polyfill/ponyfill/es6';

const downloadWithToken = async (url, name) => {

    const token = localStorage.getItem('token');
    const authorization = 'Bearer ' + token;
    const headers = new Headers({ authorization });
    const options = { headers };

    let response = await fetch(url, options)

    if (!supported) {
        window.WritableStream = WritableStream;
    }
    const filestream = createWriteStream(name);
    const writer = filestream.getWriter();

    if (response.body.pipeTo) {
        writer.releaseLock();
        return response.body.pipeTo(filestream);
    }

    const reader = response.body.getReader();

    const pump = () =>
        reader
            .read()
            .then(({ value, done }) => (done ? writer.close() : writer.write(value).then(pump)));

    pump();
};

我在做什么错？

Answer 1

我有完全一样的问题。这是我解决的方法：

import { WritableStream } from "web-streams-polyfill/ponyfill";
import streamSaver from 'streamsaver';

// If the WritableStream is not available (Firefox, Safari), take it from the ponyfill
if (!window.WritableStream) {
    streamSaver.WritableStream = WritableStream;
}

const fileStream = streamSaver.createWriteStream(fileName);

// The rest stays more or less the same, depends on the use case. For more detail in this section, refer to this example:
// https://jimmywarting.github.io/StreamSaver.js/examples/fetch.html

想法是检查window.WritableStream在当前浏览器中是否可用。如果不是，则将WritableStream中的ponyfill直接分配给streamSaver.WritableStream属性。

[已在Google Chrome 78，Firefox 70，Safari 13上测试； web-streams-polyfill 2.0.5和StreamSaver.js 2.0.3