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);
},