首先安裝 file-saver、xlsx依賴包
<template>
<div class="tb-contaner" style="font-size: 14px;">
<header style="background: white;">
<p class="tb-name">
實例表
</p>
<div class="tool-content">
<div class="aside-left">
數據日期:<span class="data-time">{{ dataYear }} 年</span> 單元(萬元)
</div>
<div class="aside-right">
<el-date-picker v-model="dataYear" type="year" placeholder="選擇年" value-format="yyyy">
</el-date-picker>
<el-button type="primary" @click.native="_fTbtoExcell" style='margin-left: 10px;'>導出</el-button>
</div>
</div>
</header>
<table style="width: 100%" border="1px" class="table-body" ref = 'tbs'>
<thead class="tb-head">
<tr>
<th colspan="2" rowspan="2" witdh="100px">業務單元</th>
<th colspan="2" rowspan="2" align="center">指標</th>
<th rowspan="2">年度</th>
<th colspan="4" class="comp-padding">第一季度</th>
<th colspan="4" class="comp-padding">第二季度</th>
<th colspan="4" class="comp-padding">第三季度</th>
<th colspan="4" class="comp-padding">第四季度</th>
</tr>
<tr class="tr-detail-month">
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>本季度合計</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
<th>本季度合計</th>
<th>7月</th>
<th>8月</th>
<th>9月</th>
<th>本季度合計</th>
<th>10月</th>
<th>11月</th>
<th>12月</th>
<th>本季度合計</th>
</tr>
</thead>
<tbody v-for="data in ywdy" v-if="ywdy.length>0">
<tr>
<td colspan="2" rowspan="8" align="center">{{data.name}}</td>
<td rowspan="4" align="center">收入</td>
<td align="center" class="comp-padding">同期實際</td>
<td v-for="dctq in data.sr.dctq" class="comp-padding comp-detail-data">
{{dctq.data}}
</td>
</tr>
<tr>
<td align="center" class="comp-padding">目標</td>
<td v-for="mb in data.sr.mb" class="comp-padding comp-detail-data">
{{mb.data}}
</td>
</tr>
<tr>
<td align="center" class="comp-padding">達成</td>
<td v-for="dc in data.sr.dc" class="comp-padding comp-detail-data">
{{dc.data}}
</td>
</tr>
<tr class="comp-finash-bg">
<td align="center" class="comp-padding">達成率</td>
<td v-for="dcl in data.sr.dcl" class="comp-padding comp-detail-data">
{{dcl.data}}
</td>
</tr>
<tr>
<td rowspan="4" align="center" >利潤</td>
<td align="center" class="comp-padding">同期實際</td>
<td v-for="dctq in data.lr.dctq" class="comp-padding comp-detail-data">
{{dctq.data}}
</td>
</tr>
<tr>
<td align="center" class="comp-padding">目標</td>
<td v-for="mb in data.lr.mb" class="comp-padding comp-detail-data">
{{mb.data}}
</td>
</tr>
<tr>
<td align="center" class="comp-padding">達成</td>
<td v-for="dc in data.lr.dc" class="comp-padding comp-detail-data">
{{dc.data}}
</td>
</tr>
<tr class="comp-finash-bg">
<td align="center" class="comp-padding">達成率</td>
<td v-for="dcl in data.lr.dcl" class="comp-padding comp-detail-data">
{{dcl.data}}
</td>
</tr>
</tbody>
</table>
<div class="no-data" v-if="ywdy.length<=0">
暫無數據
</div>
</div>
</template>
<script>
const date = new Date;
import { getAll } from "../../http/module/report.js"
export default {
name: 'reportManager',
data() {
return {
ywdy: [],
dataYear: "2009", //date.getFullYear()
}
},
mounted() {
this.search();
},
methods: {
search() {
let query = {
"ydjyglbVO.yearMonth": this.dataYear
}
getAll(query).then(response => {
if(!response) return;
let result = response.data?response.data:[];
if(result.length > 0) {
this.ywdy = [];
for(let i in result) {
//收入
let sr = result[i]['sr'];
//利潤
let lr = result[i]['lr'];
this.ywdy.push({
"name": result[i]['ywdy'],
"sr": {
"mb": sr['mb'],
"dc": sr['dc'],
"dcl": sr['dcl'],
"dctq": sr['dctq']
},
"lr": {
"mb": lr['mb'],
"dc": lr['dc'],
"dcl": lr['dcl'],
"dctq": lr['dctq']
}
})
}
} else {
this.ywdy = [];
}
})
},
/*
* @desc:點擊導出excell
* @params {null}
* @return null
*/
_fTbtoExcell(){
const { tbs } = this.$refs;
var fs = require('file-saver');
var xls = require('xlsx');
let vb = xls.utils.table_to_book(tbs);
let vbout = xls.write(vb, {bookType: 'xlsx', bookSST: true, type: 'array'});
try{
var blob = new Blob([vbout], {type: "application/octet-stream"});
fs.saveAs(blob, "sheetjs.xlsx");
}catch(e){
//TODO handle the exception
}
return vbout;
}
},
watch: {
dataYear() {
this.search();
}
}
}
</script>
<style scoped="scoped" lang="scss">
@import '@/styles/function.scss';
.table-first-tr {
align: center !important;
}
.table-body {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #b9b9b9;
text-align: center;
background: white;
}
.tb-name {
color: #333;
font-weight: bold;
font-size: 18px;
font-family: "微軟雅黑";
padding: px2rem(20px) 0 px2rem(16px) 0;
text-align: center;
}
.tool-content {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: px2rem(10px);
}
.btn-output {
margin-left: px2rem(8px);
}
.tb-head {
background: #e8e8e8;
}
.comp-padding {
padding: px2rem(10px) 0;
}
.comp-detail-data{
text-align: right;
padding-right: px2rem(15px);
}
.comp-finash-bg{
background-color: rgba(175,195,142,.29);
}
.tr-detail-month {
th {
padding: px2rem(10px) 0;
}
}
.no-data{
text-align: center;
padding: 50px;
font-family: '微軟雅黑';
font-size: 16px;
}
</style>