前端下载文件功能实现
程序员文章站
2022-05-13 10:00:57
...
若后端的导出下载接口时post类型则前端实现
1、先在请求的时候使用isBlob对后端传来的二进制流进行处理,则在请求的时候的需要在请求头部加多一行代码
const updowm = (params = {}) => {
return request({
url: '',
method: 'post',
data: params,
responseType: 'blob',//加多此行
})
};
2、封装公共导出方法
// file:文件流;
//excelName:文件名称
export default function templateDownload(file, excelName) {
const url = window.URL.createObjectURL(new Blob([file.data]))
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(file.data, `${excelName}.xls`)
} else {
const link = document.createElement('a')
link.href = url
link.setAttribute('download', `${excelName}.xls`)
document.body.appendChild(link)
link.click()
}
}
3、vue中的使用
<template>
<div class='export'>
<button @click='templateDownload'>模板下载</button>
</div>
</template>
<script>
import exportExcel from 'exportExcel',
export default {
methods:{
templateDownload() {
templateDownload(param).then(res => {
exportToExcel(res, 'excelName')
})
},
}
}
</script>