Luckysheet文档 https://mengshukeji.github.io/LuckysheetDocs/zh/guide/
Luckyexcel Demo https://gitee.com/mengshukeji/Luckyexcel/blob/export/dist/index.html
前端读取后端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>
