前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 Luckysheet 可实现 Web 的 Excel

使用 Luckysheet 可实现 Web 的 Excel

作者头像
张云飞Vir
发布2023-05-01 16:26:12
1.8K1
发布2023-05-01 16:26:12
举报
文章被收录于专栏:写代码和思考

一、写在前面

工作中会遇到excel的导入和导出,换个角度看,假如有个 web 版本的excel ,且能上传现有的,修改编辑后再下载也是个不错的方案。 Luckysheet 是实现 web版Excel的一个优秀的框架。

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

  • 功能强大:包含大量常用电子表格功能,替代你的excel
  • 配置简单:最少的配置就能开始上手使用
  • 完全开源:社区驱动,共同来完善你的想法

二、我的示例

我的DEMO效果如下:

image.png

第一步:添加依赖JS

代码语言:javascript
复制
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

第二步:指定一个表格容器

代码语言:javascript
复制
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
第三步:创建一个 Excel 文档并展示
代码语言:javascript
复制
<script>
    $(function () {
        //配置项
        var options = {
            container: 'luckysheet' //luckysheet为容器id
        }
        luckysheet.create(options)
    })
</script>

完成。

三、扩展

3.1 建议采用本地方式引入

(1) 克隆 https://github.com/dream-num/Luckysheet 后 (2) 使用 npm run build 构建。 (3) 拷贝输出的 dist 所有的文件和文件夹到你的 web工程中。 (4) 更改依赖js,像下面这样:

代码语言:javascript
复制
<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

3.2 导入 一个 excel 文件

点击上传按钮,弹窗选择一个文件,随即文件出现来 页面的表格里。

一个file控件:

代码语言:javascript
复制
<input style="font-size:16px;" type="file" @change="uploadExcel" />

绑定的js事件:

代码语言:javascript
复制
uploadExcel(evt){
        const files = evt.target.files;
        if(files==null || files.length==0){
            alert("No files wait for import");
            return;
        }

        let name = files[0].name;
        let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
        if(suffix!="xlsx"){
            alert("Currently only supports the import of xlsx files");
            return;
        }
        LuckyExcel.transformExcelToLucky(files[0], 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({
                myFolderUrl:'',
                container: 'luckysheet', //luckysheet is the container id
                showinfobar:false,
                data:exportJson.sheets,
                title:exportJson.info.name,
                userInfo:exportJson.info.name.creator
            });
        });
    },

3.3 下载(另存为)Excel

import { exportExcel } from '../js/export';

代码语言:javascript
复制
    saveExcel(){
        console.log('另存为');
        var json = window.luckysheet.getAllSheets();
        console.log(json);
        //第2个参数是导出的文件名
        exportExcel(json, "下载");
    }

这里用到了 export.js ,可以从这里获得:https://blog.csdn.net/weixin_41897680/article/details/123986004

3.4 隐藏顶部的信息栏

默认是有信息栏的,包含了logo ,返回上一页的按钮等。可通过参数设置。

参数:

  • myFolderUrl:'', // 指定返回上一页的URL
  • showinfobar:false,//是否显示顶部信息栏

更多参数见 https://dream-num.github.io/LuckysheetDocs/zh/guide/config.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

示例:

代码语言:javascript
复制
luckysheet.create({
              myFolderUrl:'', // 指定返回上一页的URL
              showinfobar:false,//是否显示顶部信息栏
              container: 'luckysheet', // 设定DOM容器的id
              title: 'Luckysheet 测', // 设定表格名称
              lang: 'zh', // 设定表格语言
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-04-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、写在前面
  • 二、我的示例
    • 第一步:添加依赖JS
      • 第二步:指定一个表格容器
      • 三、扩展
        • 3.1 建议采用本地方式引入
          • 3.2 导入 一个 excel 文件
            • 3.3 下载(另存为)Excel
              • 3.4 隐藏顶部的信息栏
              相关产品与服务
              容器服务
              腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档