请求接口
/**
* 下载文件 用于excel导出
* @param url 指代请求接口
* @param parameter
* @returns {*}
*/
export function downFile(url,parameter){
return axios({
url: url,
params: parameter,
method:'get' ,
responseType: 'blob' //文件流
})
}
调用接口函数及回调
/**
* 下载文件
* @param url 文件路径
* @param fileName 文件名
* @param parameter
* @returns {*}
*/
export function downloadFile(url, fileName, parameter) {
return downFile(url, parameter).then((data) => {
if (!data || data.size === 0) {
Vue.prototype['$message'].warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName)
} else {
let url = window.URL.createObjectURL(new Blob([data]))
//创建a标签元素,绑定下载文件url
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
//模拟点击超链接标签
document.body.appendChild(link)
link.click()
//移除创建的a标签
document.body.removeChild(link)
//释放掉blob对象
window.URL.revokeObjectURL(url)
}
})
}
compent:
<el-col :span="12">
<el-form-item>
<el-button size="small" type="primary" @click="downloadFile">下载导入模板</el-button>
</el-form-item>
<el-form-item>
<el-upload
class="import-upload"
:action="base_api+'/employee/saveByExcel'"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="importFileList">
<el-button size="small" type="primary">选择导入文件</el-button>
</el-upload>
</el-form-item>
</el-col>