1.通过后端接口导出
exportExcel() {
if(this.total>60000){
this.$alert("导出数据超出Excel的限制,请缩小查询范围");
return;
}
this.$confirm('当前待导出的数据行数过多,导出需要耗时较长,请确认是否需要导出?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '已将导出请求传导到后台,请耐心等待!'
});
this.downloadData();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消导出'
});
});
},
downloadData() {
this.$axios.post("", {
},{headers: {'Content-Type':
'application/json'},responseType:'blob'}).then(res=> {
this.downloadExcel(res.data)
}).catch(error=>{
alert(error);
});
},
downloadExcel: function(data){
if(!data){
return
}
var blob = new Blob([data], {type: 'application/vnd.ms-excel'});
var url = window.URL.createObjectURL(blob);
var aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", document.title+".xlsx");
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
},
2.前端vue导出
$ npm install xlsx
2.在js文件中引入
import XLSX from 'xlsx';
exportExcel: function(name, tableId){
//定义一个Excel表格事件,生成工作簿对象
var wb = XLSX.utils.table_to_book(document.querySelector('#'+tableId))
//获取二进制字符串作为输出
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try{
FileSaver.saveAs(
new Blob([wbout], {type: 'application/octet-stream'}),
name+'.xlsx'
)
}catch(e){
//console.log(e)
}
return wbout;
},
外部调用
exportExcel() {
let tableId ='tableExport';
this.$utils.exportExcel('免费激活个人新增趋势', tableId);
},