在线编java 在线编辑excel

转载

mob6454cc66e0d5 2023-07-06 20:16:22

文章标签 在线编java css 官网数组 文章分类 Java 后端开发

luckysheet 实现Excel在线编辑

　　有些时候我们在开发时会需要用到Excel在线编辑功能，在此我给各位小伙伴推荐luckysheet

　　luckysheet官网：https://mengshukeji.gitee.io/LuckysheetDocs/zh/

　　vue使用luckysheet教程

　　引入

　　在index.html进行JS以及css的引入

　　组件生成

　　在你项目的公共组件文件夹中创建一个组件用于存放你的luckysheet，便于调用

在线编java 在线编辑excel_在线编java_02

<template>
    <div class="hello">
        <div id="reportform"
            style="margin:0px;padding:0px;position:absolute;width:100%;height:85%;left: 0px;top: 50px;"></div>
    </div>
</template>

<script>
    export default {
        name: 'ReportPlugin',
        props: {
            msg: String,
            Reportcontent: {
                type: Array
            },
        },
        data() {
            return {
            }
        },
        mounted() {
            this.init()
        },
        methods: {

            init() {
                var options = {
                    container: 'reportform', //luckysheet为容器id
                    data:this.Reportcontent,
                    title: '报表', //表 头名
                    lang: 'zh', //中文
                    column: 20,//列数
                    row: 20,//行数
                    showtoolbar: true,//是否显示工具栏
                    showinfobar: false,//是否显示顶部信息栏
                    showsheetbar: true,//是否显示底部sheet按钮
                    allowEdit: true,//是否允许前端编辑
                    // myFolderUrl:'https://www.baidu.com/',//<左上角的“后退”按钮的链接
                    // functionButton:'<button id="" class="btn btn-primary" style="padding:3px 6px;font-size: 12px;margin-right: 10px;" >保存</button> <button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">share</button> <button id="luckysheet-share-btn-title" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 10px;">show data</button>',//右上角按钮
                  

                }
                luckysheet.create(options)
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>

　　组件调用

　　　在你需要此功能的页面进行组件引入

在线编java 在线编辑excel_在线编java_03