后端接口返回文档流，使用浏览器原生功能下载文件

在浏览器上面输入url就可以实现文件下载，然后今天需要一个导出功能，查看别人的做法都是下载对应的插件去下载pdf或xlsx文件，这里需要对下载的文件指定名字加后缀。然后发现下载后的zip包打开后是空的，想着又要下载zip插件就没有去弄。

const content = response.data 
const blob = new Blob([content]) 
const fileName = '发票差异.xlsx' 
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) 
}

这难免会让项目的体积比较大，请求接口发现可以使用window.open('url')下载，由于数据是需要加密以及加请求头，这可以使用xhr会比较麻烦，通过axios拦截器发现返回的数据是会缓存到浏览器本地，然后发现可以直接拿到这个缓存的文件实现下载。

具体代码：

const res: any = await getConfig({ appId: route.query.appId });
let url = res.request.responseURL
window.open(url)