在日常開發(fā)中版姑，我們可能會遇到導出excel的情況童叠，而后端此時給我們返回的是一個文件流辩诞，需要前端將文件流轉(zhuǎn)為url地址進行下載。
可以將這個方法封裝成一個工具類酒朵，方便其他地方調(diào)用桦锄，我這里放到了utils.js里面
import axios from 'axios'
import Vue form 'vue'
/**
* 根據(jù)后端返回的文件流轉(zhuǎn)為excel導出
* @param {Object} data
*/
export function exportExcelMethod(data) {
axios({
method: data.method,
url: `${data.url}${data.params ? '?' + data.params : ''}`,
responseType: 'blob',
headers: {
token: data.token
},
timeout: 8000,
data: data.data
})
.then((res) => {
const link = document.createElement('a')
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
})
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// link.download = res.headers['content-disposition'] //下載后文件名
link.download = data.fileName //下載的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
Vue.prototype.$message.success('導出成功！')
})
.catch((error) => {
Vue.prototype.$message.error('參數(shù)錯誤蔫耽！')
})
}
<el-button type="primary" plain size="small" @click="exportLog">導出</el-button>
import { exportExcelMethod } from '@/utils'
exportLog() {
const url = this.baseUrl
const data = this.data
const myObj = {
method: 'post',
url: url,
fileName: 'xxx日志',
token: this.token,
data: { data }
}
exportExcelMethod(myObj)
}
