//按鈕
<a-upload :beforeUpload="beforeUpload" :showUploadList="false">
<a-button type="primary" icon="upload">導入</a-button>
</a-upload>
<a-button @click="downExcel" type="primary" icon="download">導出</a-button>
methods下
//引入
import { downFileExcel } from '@/api/manage'
// 導入文件
beforeUpload(file) {
return new Promise((resolve, reject) => {
let fileType = file.type
if (
fileType.indexOf('application/vnd.ms-excel') < 0 &&
fileType.indexOf('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') < 0
) {
this.$message.warning('請上傳excl')
reject(false)
} else {
let formData = new FormData()
formData.set('file', file)
// 後端接口
importExcel(formData).then(res => {
if (!res.msg) {
resolve(file)
this.$message.success('上傳成功')
setTimeout(() => {
// this.$router.go(0)
this.$refs.modalTable.loadData(true)
}, 500)
} else {
this.$message.error(res.msg)
}
})
}
})
},
// 下載模板
downExcel(fileName) {
if (!fileName || typeof fileName != 'string') {
fileName = `遊戲列表-${dayjs().format('YYYY-MM-DD')}` //自定義文件名
}
let param = {}
downFileExcel(this.exportXlsUrl, param).then(data => {
if (!data) {
this.$message.warning('文件下載失敗')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
} else {
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/octet-stream' }))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) //下載完成移除元素
window.URL.revokeObjectURL(url) //釋放掉blob對象
}
})
}
api文件下的manage.js
/**
* 下載文件 用於excel導出
* @param url
* @param parameter
* @returns {*}
*/
export function downFile(url,parameter){
return axios({
url: url,
params: parameter,
method:'get' ,
responseType: 'blob'
})
}
export function downFileExcel(url,parameter){
return axios({
url: url,
data: parameter,
method:'post' ,
responseType: 'blob'
})
}