a标签的用法都很熟悉,但是却有两个致命缺点:
-
不能携带鉴权信息
token
-
兼容性问题
只有 火狐和谷歌浏览器支持!!!
axios模拟a标签
this.axios
.get(`url接口地址`, {
responseType: 'blob', // 设置为blob格式
headers:{ xxxx:'xxxxx'}
}).then((res) => {
if (res.status===200) {
var elink = document.createElement('a');
elink.download = '数据.xlsx';
elink.style.display = 'none';
elink.href = window.URL.createObjectURL(res.data);
elink.click();
this.$message({
type: 'success',
message: '数据导出成功'
});
}
})
.catch((err) => {
this.$message.error(`数据导出失败,${err.message}`);
});
利用XLSX插件将table数据导出为xlsx文件
<script>
import XLSX from 'xlsx'
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
age: 18
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
age: 18
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
age: 18
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
age: 18
}
]
}
},
methods: {
handleXlsx(){
//获得当前组件的过滤器filters
// this.$options.filters.politicalToLabel(item.political)
// 创建workbook对象
const wb= XLSX.utils.book_new();
// 将json对象格式转换为worksheet
let table_book = XLSX.utils.json_to_sheet(this.tableData);
// worksheet 加入workbook
XLSX.utils.book_append_sheet(wb, table_book, 'sheet1');
// 导出
XLSX.writeFile(wb, 'fileName.xlsx');
}
}
}
</script>