处理后端返回的 blob 文件流，导出文件到本地

╰半橙微兮° 2023-07-18 14:26 20阅读 0赞

exportTableData(params).then(res => {
        const blob = new Blob([res])
        const fileName = '报表.xls'
        const link = document.createElement('a')
        link.download = fileName
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      })

通过创建一个 a 标签，并且再去触发 a 标签，达到一下导出下载文件的效果。

**`URL.createObjectURL()`** 静态方法会创建一个 [`DOMString`][DOMString]，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 [`document`][document] 绑定。这个新的URL 对象表示指定的 [`File`][File] 对象或 [`Blob`][Blob] 对象。

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

你可以在 `sourceopen` 被处理之后的任何时候调用 `revokeObjectURL()`。这是因为 `createObjectURL()` 仅仅意味着将一个媒体元素的 `src` 属性关联到一个 [`MediaSource`][MediaSource] 对象上去。调用`revokeObjectURL()` 使这个潜在的对象回到原来的地方，允许平台在合适的时机进行垃圾收集。

[DOMString]: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
[document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[File]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[URL.createObjectURL]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
[MediaSource]: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource