导出excel

在导出文件的时候，有时候会返回blob文件流的数据，而不是返回URL地址，对于这种场景，我们可以使用window.URL.createObjectURL下载Blob文件并IE/Edge兼容

第一步在请求中，加上responseType: 'blob’入参

// 导出
export async function exportRuleList(data) {
	return await  API.request({
			url: '/audit/ruleconf/exportRuleList',
			method: 'post',
			responseType: 'blob',
			data
	})
}

第二步下载文件的方法

 <el-button type="primary" class="btn_bottom" plain @click="exportExcel">导出</el-button>
 //导出execl
   downFile(resBlob, fileName, fileType = '.xls', target = '_self') {
      var blob = new Blob([resBlob], {
        type: 'application/vnd.ms-excel;charset=utf-8'
      })
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // 兼容IE/Edge
        window.navigator.msSaveOrOpenBlob(blob, fileName + fileType)
      } else {
        var url = window.URL.createObjectURL(blob)
        var a = document.createElement('a')
        a.href = url
        a.target = target
        a.style.display = 'none'
        a.setAttribute('download', fileName + fileType)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
      }
    },
     exportExcel() {
      console.log("1111111111111111111111");
      exportRuleList().then(res => {
        this.downFile(res, '文件下载')
      })
      
    },
 

兼容

使用window.URL.createObjectURL创建Blob链接区别

1、IE生成不带域名的blob:链接

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
blob:8279D2BD-AA94-410D-B5D1-3DFD881E49D9

2、chrome生成带有当前域名的标准blob:链接

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36
blob:http://localhost:8080/9f3a8b63-02a7-43e5-865b-9a54051040a7

3、edge生成带有当前域名的标准blob:链接，却下载不了，然而存在window.navigator.msSaveOrOpenBlob方法，使用该方法创建Blob链接可以下载

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
blob:http://localhost:8080/a05dd411-e25a-4f19-9c70-715a0f0b05c6