vue将table导出成excell

首先安装 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 }} &nbsp;年</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>