后台返回数据需要前端下载文件显示内容

川长思鸟来 2021-08-31 01:18 389阅读 0赞

const content = res.data （后台返回的数据需要前端自行下载文件）
              const blob = new Blob([content])
              const fileName = 'auth.hwkey'
              if ('download' in document.createElement('a')) { // 非IE下载
                const elink = document.createElement('a')
                elink.download = fileName
                elink.style.display = 'none'
                elink.href = URL.createObjectURL(blob)
                document.body.appendChild(elink)
                elink.click()
                URL.revokeObjectURL(elink.href) // 释放URL 对象
                document.body.removeChild(elink)
              } else { // IE10+下载
                navigator.msSaveBlob(blob, fileName)
              }

objectURL = URL.createObjectURL(object);

**`object`**用于创建 URL 的 [`File`][File] 对象、[`Blob`][Blob] 对象或者 [`MediaSource`][MediaSource] 对象。

在每次调用 `createObjectURL()` 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 [`URL.revokeObjectURL()`][URL.revokeObjectURL] 方法来释放。

**Internet Explorer 10** 的 [**msSaveBlob**][msSaveBlob] 和 [**msSaveOrOpenBlob**][msSaveOrOpenBlob] 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，两个方法的参数相同，

msSaveBlob：只提供一个保存按钮

msSaveOrOpenBlob：提供保存和打开按钮

[File]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[MediaSource]: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource
[URL.revokeObjectURL]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL/revokeObjectURL
[msSaveBlob]: https://technet.microsoft.com/zh-cn/library/hh441122.aspx
[msSaveOrOpenBlob]: https://technet.microsoft.com/zh-cn/library/hh772332.aspx