首页 > 其他分享 >vue 前端读取后端excel文件流在页面显示、导出

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

时间:2022-11-14 22:57:16浏览次数:37  
标签:none vue 流在 excel deep important luckysheet 0px display

前端读取后端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>

 

标签:none,vue,流在,excel,deep,important,luckysheet,0px,display
From: https://www.cnblogs.com/panwudi/p/16890828.html

相关文章

  • vue+iviews 动态表格(table组件)
      iviews官网上关于table的使用方法是固定表头的使用方法,如何生成动态的table网上找了好多也没有特别合适的,综合几位博主的文章经过尝试终于实现了,分享出来供大家参考......
  • Vue2.x下的各组件如何传递信息?(不使用Vuex)
    Vue2(选项式)一,父组件向子组件传递数据:介绍:在引用的子组件中定义自定义属性msg与user.可以通过v-bind绑定要发送的数据。  在子组件中使用props接收自定义属性msg......
  • vue + el-menu 动态加载 一二级菜单 侧边栏
    1.HTML<template><divclass="container"><divclass="top">上</div><divclass="main"><!--动态加载侧边栏首先分为可折叠的......
  • 65.说下vue3的使用感想(说些vue3对比vue3的方便之处)
    vue3使用了组合式API,setup替换了选项式api,不需要在多个api里面写代码了,而且使用了setup的语法糖,可以更加方便写代码;vue3使用proxy替代了Object.defineProperty实现数......
  • 58. vue常用的api
    1. nextTick 使用场景:通过异步渲染的页面解构不能直接dom操作,要使用nextTick(延迟回调)等待一下;nextTick的作用:感知dom的更新完成,类似于updated;2.set用来追加响......
  • vue脚手架的使用
    vue脚手架的使用搭建vue脚手架环境1.傻瓜式安装node:官网下载:https://nodejs.org/zh-cn/2.安装cnpm:>:npminstall-gcnpm--registry=https://registry.npm.tao......
  • vue input数据动态脱敏
    页面中放两个输入框,一个绑定真实数据、一个绑定脱敏数据,仅展示脱敏数据。<van-fieldv-model="person.cardNo"v-show="false"name="证件号码"......
  • 【Vue-05】修改Vue的默认配置
    修改Vue的默认配置Vue脚手架隐藏了所有webpack相关的配置,若想查看具体的webpack配置,请执行:vueinspect>output.js,若要个性化配置Vue脚手架,就需要创建vue.config.js这一......
  • Vue3.0中如何监听props方法
    exportdefaultdefineComponent({ props:{  isOpen:Boolean, }, emits:{  "close-modal":null, }, setup(props,context){  watch(......
  • Vue使用第三方库(Swiper 轮播图)
    使用库之前肯定是先安装库:(tips:指定版本可以在后面加上@8.4.4)cnpminstall--saveswiper这种方式可以将库保存到package.json中:  然后就是使用:首先是引......