通过web worker线程实现文件下载

worker脚本

创建 work.ts 文件

const workercode = () => {
  self.onmessage = function (e) {
    fetch(e.data?.url)
      .then((res) => res.blob())
      .then((blob) => {
        self.postMessage(blob);
      });
  };
};
// 把脚本代码转为string
let code = workercode.toString();
code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));

const blob = new Blob([code], { type: 'application/javascript' });
const worker_script = URL.createObjectURL(blob);

export default worker_script;

主线程调用

// a标签通过转换后的url下载文件(视频不会跳转)
export function daonload({ url, name }: { url: string; name: string }) {
  message.loading({ content: '下载中', key: 'down', duration: 0 });
  const myWorker = new Worker(worker_script);
  myWorker.postMessage({ url, name });
  myWorker.onmessage = function (e) {
    const a = document.createElement('a');
    const objectUrl = window.URL.createObjectURL(e.data);
    a.download = name;
    a.href = objectUrl;
    a.click();
    window.URL.revokeObjectURL(objectUrl);
    a.remove();
    message.success({ content: '下载成功!', key: 'down', duration: 2 });
    /** 关闭worker线程 */
    myWorker.terminate();
  };
}