import Download from '@/components/DownLoad/index'
Vue.component('Download', Download);
<template>
<div class="energy-index-wrap qry-index-wrap">
<el-button type="export" @click="ExportData">導出</el-button>
</div>
<down-load
ref="downLoad"
excelName="報表"
url="你的導出接口地址"
:params="qryForm"
/>
<template>
import DownLoad from '@/components/DownLoad/index'
export default {
components: {
'down-load': DownLoad
},
data() {
return {
qryForm: {
useOrgId: '',
equipSystemCode: '',
}
}
},
methods: {
async ExportData() {
this.$refs.downLoad.downLoad()
}
}
}
<template></template>
<script>
import axios from 'axios'
import { Message, Loading } from 'element-ui'
import store from '@/store'
import { parseTime } from '@/utils/index'
let fileName = ''
let loadingInstance = {
close: function() {}
}
const timeout = 20000
const service = axios.create({
baseURL: process.env.BASE_API,
timeout
})
service.interceptors.request.use(
config => {
loadingInstance = Loading.service({
lock: true,
text: '正在導出,請耐心等待.....',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
config.headers['Authorization'] = store.getters.token || ''
return config
},
error => {
window.console.error(error)
return Promise.reject(error)
}
)
service.interceptors.response.use(
res => {
loadingInstance.close()
processData(res.data)
res.data = ''
return res
},
error => {
loadingInstance.close()
window.console.error(error)
return Promise.resolve(error.response)
}
)
function processData(data) {
if (!data) {
return
}
const url = window.URL.createObjectURL(new Blob([data]))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
function ajax(url, method, data = {}) {
let paramStr = ''
for (const p in data) {
paramStr += '&' + p + '=' + data[p]
}
paramStr && (url += '?' + paramStr.slice(1))
service({
method,
url,
data: data,
responseType: 'blob'
})
.then(res => {
res = res || { status: 404, statusText: '服務器出錯!' }
if (res.status === 200 || res.status === 304 || res.status === 400) {
return res
}
})
.catch(err => {
Message({
message: `導出有問題,${err}`,
type: 'error',
duration: 2 * 1000
})
window.console.log('代碼有問題:', err)
})
}
export default {
name: 'DownLoad',
props: {
url: {
type: String,
default: ''
},
excelName: {
type: String,
default: ''
},
fileName: {
type: String,
default: ''
},
params: {
type: Object,
default: function() {
return {}
}
},
method: {
type: String,
default: 'post'
}
},
methods: {
downLoad(params) {
this.$nextTick(() => {
const nowTime = parseTime(new Date(), '{mm}-{dd} {hh}_{ii}_{ss}')
Object.assign(this.params, params)
let excelName = this.excelName
if (!excelName.includes('.xls')) {
excelName += '.xlsx'
}
fileName = this.fileName || excelName || 'excel.xlsx'
fileName = fileName.replace(/(\.\w+)$/, '(' + nowTime + ')$1')
this.params.excelName && delete this.params.excelName
this.params.fileName && delete this.params.fileName
ajax(this.url, this.method, this.params)
})
}
}
}
</script>
<style scoped>
</style>