没有特别的幸运，那么就特别的努力！！！
| 导出数据是每个开发者做管理后系统必走的路，该篇掘文是前者踩过一些坑 而踏出来的几条路，希望这些经验能在开发的过程中帮助到大家！！！ |
这里主要讲下 导出Excel导出
<el-button round size="small" type="primary" @click="exportExcel">导出数据</el-button>
methods: {
// 导出
exportExcel () {
const exeParams = {
...this.startRequestData // startRequestData 接口需要的参数
}
this.Api.getQualityExport(exeParams, {
responseType: 'blob'
}).then(res => {
if (res.status === 200) {
__DownLoadByBlob(res.data, res.headers['content-disposition'])
}
})
}
}
// 可以放入一个方法文件里面 再引入__DownLoadByBlob这个方法
/**
* 下载二进制文件流
* @param {Blob} blob 文件流
* @param {String} contentDisposition 文件名的请求头 对应 content-disposition
*/
export function __DownLoadByBlob (blob, contentDisposition) {
const file = new Blob([blob], { type: 'application/octet-stream' })
// 提取文件名
const fileName = contentDisposition.match(
/filename=(.*)/
)[1]
if (typeof window.navigator.msSaveBlob !== 'undefined') { // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
window.navigator.msSaveBlob(file, decodeURI(fileName))
} else {
const blobURL = window.URL.createObjectURL(file)
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', decodeURI(fileName))
if (typeof tempLink.download === 'undefined') { // 兼容：某些浏览器不支持HTML5的download属性
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
}
希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！
