vue 前端读取后端excel文件流在页面显示、导出

前端读取后端excel文件流在页面显示、导出，主要是样式布局要完全不变，所以不能用a-table/el-table,采用三方luckyexcel

安装依赖 npm install luckyexcel

<template>
    <!-- 工作概要 -->
    <div>
        <a-row type="flex" justify="end" style="margin: 10px 0">
            <a-month-picker v-model="monthPicker" :disabled-date="disabledDate" placeholder="选择月份" @change="onChange">
            </a-month-picker>
            <a href="javascript:;" @click="downloadExcel" style="margin-top: 5px; margin-left: 10px">导出</a>
        </a-row>
        <div class="excel">
            <div
                id="luckysheet"
                class="luckysheet"
            ></div>
        </div>
    </div>
</template>

<script>//引用luckyexcel
import LuckyExcel from 'luckyexcel'
import moment from 'moment'//接口
import { outlines_stream } from '@/api/excel'
export default {
    name: 'Inspection',
    data () {
        return {
            monthPicker: '',
            dateFormat: 'YYYY-MMD',
            tableHtml: ''
        }
    },
    mounted () {
        this.rangeFC() // 再父组件中调用请注释
    },
    methods: {
        onEXCLOR () {
            const params = {
                begin_time: moment(this.monthPicker).format('YYYY-MM')
            }
            outlines_stream(params).then(res => {
                const objectURL = window.URL.createObjectURL(res)
                this.uploadExcel(objectURL)
            })
        },
        uploadExcel (url) {
            LuckyExcel.transformExcelToLuckyByUrl(url, 'test3.xlsx', function (exportJson, luckysheetfile) {
                if (exportJson.sheets == null || exportJson.sheets.length == 0) {
                    alert('Failed to read the content of the excel file, currently does not support xls files!')
                    return
                }
                window.luckysheet.destroy()
                window.luckysheet.create({
                    container: 'luckysheet',
                    data: exportJson.sheets,
                    title: exportJson.info.name,
                    userInfo: exportJson.info.name.creator,
                    lang: 'zh',
                    showinfobar: false,
                    showtoolbar: false,
                    allowEdit: false,
                    allowCopy: false,
                    editMode: true
                })
            })
        },　　　　　//导出 
        downloadExcel () {
            const params = {
                begin_time: moment(this.monthPicker).format('YYYY-MM')
            }
            outlines_stream(params).then(res => {
                this.isMaskShow = false
                // 设置连接
                const objectURL = window.URL.createObjectURL(res)
                // 创建一个隐藏的a连接，
                const link = document.createElement('a')
                link.href = objectURL
                // TODO 和后台商量文件名生成规则
                link.download = `运营中心${params.begin_time}工作概要.xlsx`
                // 模拟点击事件
                link.click()
            })
        },
        moment,
        rangeFC () {
            this.monthPicker = ''
            this.monthPicker = moment(this.getCurrentData(), this.dateFormat)
            this.onEXCLOR()
        },
        getCurrentData () {
            let time = new Date().toLocaleDateString()
            return time
        },
        onChange (val) {
            let A = moment(val).format('YYYY-MM')
            console.log()
            if (A === 'Invalid date') {
                this.rangeFC()
            } else {
                this.monthPicker = moment(val).format('YYYY-MM')
                this.onEXCLOR()
            }
            // moment(val).format('YYYY-MM-DD')
        },
        disabledDate (current) {
            const date = new Date()
            let month = date.getMonth() + 1
            // 禁止当前月往前推2月且后面月份不可选
            return current.month() < month - 3 || current > moment().endOf('day')
        }
    },
    beforeDestroy () {}
}
</script>

<style scoped lang="less">
.excel {
    width: 100%;
    height: 60vh;
        .luckysheet {
            margin:0px;
            padding:0px;
            position:absolute;
            width:100%;
            left: 0px;
            top: 95px;
            bottom:0px;
        }
}
// /deep/.luckysheet-paneswrapper{
// display: none!important;
// }
/deep/.luckysheet-zoom-content{
    display: none!important;
    height: 0px!important;
}
/deep/.luckysheet-print-viewList {
    display: none!important;
   height: 0px!important;
}
.excel {
    width: 100%;
    height: 60vh;
        .luckysheet {
            margin:0px;
            padding:0px;
            position:absolute;
            width:100%;
            left: 0px;
            top: 95px;
            bottom:0px;
        }
}
.centers {
    color: #ccc;
    font-size: 12px;
    text-align: center;
}
/deep/.luckysheet-zoom-content{
    display: none!important;
    height: 0px!important;
}
/deep/.luckysheet-print-viewList {
    display: none!important;
   height: 0px!important;
}
/deep/#luckysheet-bottom-add-row{
    display: none;
}
/deep/#luckysheet-bottom-add-row-input{
    display: none;
}
/deep/#luckysheet-bottom-controll-row{
    span{
        display: none;
    }
}
/deep/.luckysheet-sheet-area .luckysheet-sheets-item, .luckysheet-sheet-area>div{
    display: none!important;
}
/deep/.lucky-button-custom{
    display: none!important;
}
/deep/.luckysheet-wa-calculate{
    display: none!important;
}
</style>