1,js文件
// 文件导出
export const exportFileRequest = (url, params) => {
return axios({
method: 'get',
url: `${base}${url}`, // 后端下载文件的接口
params: params,
responseType: 'blob', // 必须
headers: { // 有的需要带上token等,可以写在这里,也可以封装起来
// Authorization: getToken(),
}
});
};
2,html页面使用例子
<template>
<div>
<button v-on:click="download">下载文件</button>
</div>
</template>
<script>
// 引入需要使用的API
import {exportExcel} from '@/api/index'
export default {
name: 'FileDownLoad',
methods: {
// 下载Excel
download() {
exportExcel().then(res => {
console.log(res);
this.downloadFile(res.data)
})
},
downloadFile(data) {
// 文件导出
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
// link.setAttribute('download', '测试excel.xls'); // 文件名称
link.setAttribute("download", decodeURI(res.headers['filename'])) // 解析文件名
// 一般项目中,点击下载文件,那个就是文件名,如果后端没有返回headers这些内容,只返回了数据流,可以在点击的时候把name传进来,直接使用
document.body.appendChild(link);
link.click()
// 释放内存
// window.URL.revokeObjectURL(link.href)
}
}
}
</script>
3,一般点击下载,点击的就是文件名
<template>
<div>
<button v-on:click="download('测试.xlsx')">带后缀的某某文件(测试.xlsx)</button>
<!-- 一般会有文件名,把文件名直接传入,下面就不用解析文件名了 -->
</div>
</template>
<script>
// 引入需要使用的API
import {exportExcel} from '@/api/index'
export default {
name: 'FileDownLoad',
methods: {
// 下载Excel
download(name) {
exportExcel().then(res => {
console.log(res);
this.downloadFile(res.data, name)
})
},
downloadFile(data, name) {
// 文件导出
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', name); // 文件名称
// 一般项目中,点击下载文件,那个就是文件名,如果后端没有返回headers这些内容,只返回了数据流,可以在点击的时候把name传进来,直接使用
document.body.appendChild(link);
link.click()
// 释放内存
// window.URL.revokeObjectURL(link.href)
}
}
}
</script>
备注: 参考文档
