fetch文件流处理

fetch下载文件

由于业务需要列表导出excel表格，前端使用的是 fetch 发的请求，后端返回的是文件流，并不是 url

1、设置请求头；

// 本人未验证options参数
fetch('url/**', {
    method: "GET",
    headers: {
        'Content-Type': "application/octet-stream;charset=UTF-8",
    }
}).then(() => {
    // 这里解析body
    return res.blob();
}).then((res) => {
    // blob对象
    return res;
})

2、下载；

fetch('url', {
    method: "GET",
    headers: {
        'Content-Type': "application/octet-stream;charset=UTF-8",
    }
}).then(() => {
    return res.blob();
}).then((res) => {
    // 对blob对象进行处理
    const a = document.createElement('a');
    const body = document.querySelector('body');
    // 这里注意添加需要下载的文件后缀；
    a.download = 'downloadName.xlsx';
    a.href = window.URL.createObjectURL(res);
    a.style.display = 'none';
    body.appendChild(a);
    a.click();
    body.removeChild(a);
    window.URL.revokeObjectURL(a.href);
})

3、拓展

1. URL.createObjectURL

   该方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

   • 语法：

     objectURL = URL.createObjectURL(object);
     

   • 参数：

     object: 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
     

   • 返回值；

     包含了一个对象的URL，该URL可用于指定源 object的内容。例如：临时图片url
     

   • 附注：

     在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
     浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
     

2. URL.revokeObjectURL;

   该方法会用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

   • 语法：

     window.URL.revokeObjectURL(objectURL);
     

   • 参数；

     一个 DOMString，表示通过调用 URL.createObjectURL() 方法产生的 URL 对象。