前端導(dǎo)出excel有三種方式：1.通過純前端導(dǎo)出excel，2.通過調(diào)取接口導(dǎo)出excel炮赦，就是后端做導(dǎo)出功能，這種的話一般就是后端返回給你的數(shù)據(jù)形式是blob或者是arrybuffter這種方式样勃，3.三種就是后端給你一個(gè)導(dǎo)出的地址吠勘，前端通過window.location.href導(dǎo)出
1.通過純前端導(dǎo)出excel
1.安裝插件
npm install js-xlsx file-saver -S
npm install script-loader -S -D //它幫我們掛載了，不需要引入到main.js里面
2峡眶、在src下創(chuàng)建一個(gè)文件夾vendor,并且引入Export2Excel.js
此處附上我項(xiàng)目中vendor的鏈接剧防，直接拷過去就好：
3.html
<template>
????<div>
????????<el-button?type="primary"?@click="onexcel">導(dǎo)出數(shù)據(jù)</el-button>
??<el-table
????:data="tableData"
????border
????style="width:?100%">
????<el-table-column
??????prop="date"
??????label="日期"
??????width="180">
????</el-table-column>
????<el-table-column
??????prop="name"
??????label="姓名"
??????width="180">
????</el-table-column>
????<el-table-column
??????prop="address"
??????label="地址">
????</el-table-column>
??</el-table>
????</div>
</template>
<script>
export default{
data(){
return{
?tableData:?[{
?????????????????id:?1,
??????????date:?'2016-05-02',
??????????name:?'王小虎',
??????????address:?'上海市普陀區(qū)金沙江路?1518?弄'
????????},?{
????????????id:?2,
??????????date:?'2016-05-04',
??????????name:?'王小虎',
??????????address:?'上海市普陀區(qū)金沙江路?1517?弄'
????????},?{
????????????id:?3,
??????????date:?'2016-05-01',
??????????name:?'王小虎',
??????????address:?'上海市普陀區(qū)金沙江路?1519?弄'
????????},?{
????????????id:?4,
??????????date:?'2016-05-03',
??????????name:?'王小虎',
??????????address:?'上海市普陀區(qū)金沙江路?1516?弄'
????????}],
}
},
methods:{
onexcel() {
? // this.downloadLoading = true;
? import("@/vendor/Export2Excel").then(excel => {
? ? const tHeader = ["id", "date", "name", "address",];//要導(dǎo)出后表頭是什么，可以跟tableDate中的表頭不一致
? ? const filterVal = [
? ? ? "id",
? ? ? "date",
? ? ? "name",
? ? ? "address"
? ? ];
? ? const data = this.formatJson(filterVal, this. tableData)
? ? // const data = this.tableData;這里可以通過獲取表格中的數(shù)據(jù)的接口獲取
? ? excel.export_json_to_excel({
? ? ? header: tHeader,
? ? ? data,
? ? ? filename: "table-list"? //導(dǎo)出文件的名辫樱，自定義就好
? ? });
? ? // this.downloadLoading = false;
? });
},
//下載方法中诵姜，需要用到的格式化json的方法
formatJson(filterVal, jsonData) {
? return jsonData.map(v =>
? ? filterVal.map(j => {
? ? ? if (j === "id") {? //此處如沒有要格式化的列，可以不用此判斷
? ? ? ? // return parseTime(v[j])
? ? ? ? return v[j];
? ? ? } else {
? ? ? ? return v[j];
? ? ? }
? ? })
? );
},
}
}
2.通過調(diào)取接口導(dǎo)出excel搏熄，
例如：
onexcel(){
let data = {
? ? ? ? carNo, //物資/車牌號(hào)
? ? ? ? provider, //項(xiàng)目
? ? ? ? name, // 供貨商
? ? ? ? mzTimeBegin: inTimes ? inTimes[0] : "",
? ? ? ? mzTimeEnd: ?inTimes ? inTimes[1] : "",
? ? ? };
?WeighbridgeExcelList(data).then((res)=>{//?WeighbridgeExcelList是封裝的api接口
?const aLink = document.createElement("a");
? ? ? ? ? let blob = new Blob([res], { type: "application/vnd.ms-excel" });
? ? ? ? ? aLink.href = URL.createObjectURL(blob);
? ? ? ? ? ? aLink.setAttribute('download', '地磅記錄.xlsx');
? ? ? ? ? aLink.click();
? ? ? ? ? document.body.appendChild(aLink);
? ? ? ? ? // this.$refs.loadElement.appendChild(aLink)
? ? ? ? }) .catch((err) => {
? ? ? ? ? this.$message.warning(err);
? ? ? ? })
}
3.三種就是后端給你一個(gè)導(dǎo)出的地址
例如：
onexcel(){’
this.$axios.get("接口地址",{params:{
? ? ? ? ? ? 參數(shù)1: data ...
? ? ? ? }}).then(res => {
? ? ? ? if(res.request.status === 200) {
? ? ? ? // 導(dǎo)出
? ? ? ? ? ? location.href = res.request.responseURL;
? ? ? ? ? ? // window.open(res.request.responseURL);
? ? ? ? ? ? this.$message({message: '導(dǎo)出成功', type: 'success'});
? ? ? ? }
? ? }).catch( err => {
? ? ? ? this.$message.error('導(dǎo)出失敗');
? ? })
————————————————
版權(quán)聲明：本文為CSDN博主「陽光的男夾克」的原創(chuàng)文章棚唆，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明心例。
原文鏈接：https://blog.csdn.net/weixin_44640323/article/details/108756402
}
