文章介绍了三种导出Excel的方式：Java后台模板导出、基于POI解析Luckysheet数据的导出和前端使用exceljs的快速导出。重点强调了Luckysheet的性能和二次开发优势，以及为何选择Luckysheet替换OnlyOffice。作者还提供了基于Luckysheet的导入导出示例代码和使用场景分析。
目前已经实现导出有三种方案。Java后台方式基于模板导出、Java后台方式基于POI从零解析luckysheet数据导出！、js方式前端导出。
第三种方式，基于前端exceljs导出！基于前端有什么好处呢，快，不需要进过后台处理生成，目前实践出Vue 导入导出版本es6（群友提供的解析exceljs代码），需要普通HTML静态文件，则打包Vue 即可！参考下方【5.基于前端解析导出 exceljs】
Vue基于前端导入导出版本:https://github.com/oy-paddy/luckysheet-vue-importAndExport/tree/master
1.为啥使用Luckysheet？
之前的方案使用的是开源的onlyoffice，可以做到导入导出，在线编辑保存。它功能真的很齐全，但是二次开发真的不是很友好，尤其是小白！最终让我放弃的原因是，加载文档有时候真的很慢...
Luckysheet（https://github.com/mengshukeji/Luckysheet）是一款轻量的在线Excel渲染框架，易集成使用。支持二次开发，最重要的是渲染真的很快！！！
2.Luckysheet目前使用
关于导入导出官方有给出demo：https://github.com/mengshukeji/Luckyexcel
3.导入：
只支持xlsx导入，因为这个是json格式数据。xls不支持！导入可以使用官方的demo哦！当然啦，官方的demo，小白会懵！所以我抽空写个导入导出demo！
github地址：https://github.com/oy-paddy/luckysheet_import_export 该demo 是基于https://github.com/mengshukeji/Luckyexcel
修改了几个点：
1.初始化时加载Excel文件，也可以说是导入Excel模板。
2.添加保存和下载按钮，在html函数中对应的名称是uploadExcelData和downExcelData，经过初始化导入的模板文件，通过luckysheet.getAllSheets()获取的就是模板数据，可以保存到服务器，在后台经过【4.导出：】的步骤，可以生成xlsx的文件！
luckysheet_import_export 项目使用：
1.首先下载代码，解压。会git的直接git下载
2.进入到luckysheet_import_export-master 目录里边，执行 npm intall
3.执行npm run dev 会启动浏览器加载显示
4.你在网页上随便输入数据，按保存或者下载，会拿到修改后的luckysheet格式的模板数据，也就是在Java后台中的exceldatas参数！
估计有人看到html代码，会问，你这都写死的，我想自己定义咋办？比如我想通过按钮导入，不想一开始就导入...
首先百度下node.js 和 js的区别，别傻傻的在JavaScript中调用ts文件中的函数
自己定义需要修改luckyexcel.js，准确的说是修改src/main.ts。看到图中的ID没，就是写死在html文件中的。为啥要修改main.ts文件，而不是直接luckyexcel.js代码，你先看下luckyexcel.js的代码就知道了。你问这个问题，说明你不知到ts文件是啥，ts文件(typescript)最后会通过 npm rum build 打包成luckyexcel.js文件，并且生成在dist目录下！然后在dist目录下，双击index.html就可以看到效果了！
4.基于模板导出：
注意：在使用导出之前，必须使用过导入的操作取得模板Excel的luckysheet数据格式，在模板luckysheet数据进行修改导出操作，不然你样式是没有的，因为你是基于模板.xlsx文件导出的！该方案是依赖模板的，适合样式固定，有固定模板的。不理解的请参考easyExcel根据模板进行数据填充：https://www.yuque.com/easyexcel/doc/fill
这样做的好处是啥呢，你只需要关注数据写入即可，样式不用管了，因为样式模板自带了。也就是下方提到的：有没有一种只关注数据写入，不关注样式呢！
关于导出，其实就是数据填充。其实lucky的文档也很全面，数据格式都列出来了，你需要做的就是根据数据写入xls或者xlsx文件。所以你要做的就是根据luckysheet的数据写入样式、单元格格式、颜色，大小高度等。但是这样对于小白也是很复杂的，完全手写，样式肯定会跟原文档不一样啊。有没有一种只关注数据写入，不关注样式呢！还真有，收到easyExcel的启发，它是根据Excel模板写入的。
但是easyExcel支持bean循环写入，而我想要的是，一个Excel写入框架，可以根据luckysheet的r（行）,c（列）写入数据而已。
ps:昨天看到有人说，他有700多个不同的Excel文件，那不是要弄700多个模板文件。心疼ing，期待大大们的前端导出方案了！
所以我用到了POI框架写入，参考链接：https://yq.aliyun.com/articles/680217
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.12</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.12</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml-schemas</artifactId>
<version>3.12</version>
</dependency>
布局代码如下，可以直接复制下来。但是注意下上传下载数据，只是个例子，需要自己修改。上传必须用post哦，因为数据太大了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线表格</title>
</head>
<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>
<body>
<!--<button οnclick="clicks()">保存</button>-->
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</body>
<script>
//loadUrl是返回luckysheet 数据的后台api接口
var options = {
container: 'luckysheet', //luckysheet为容器id
title: '生产日报表', // 设定表格名称
lang: 'zh', // 设定表格语言
allowEdit: true,//作用：是否允许前台编辑
showinfobar: true,//作用：是否显示顶部信息栏
myFolderUrl: "/getList",//作用：左上角<返回按钮的链接
functionButton: '<button id="" class="btn btn-primary" οnclick="clicks()" 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: 85px;" οnclick="downExcelData()">下载</button>',
loadUrl: "/excel/downData?id=1",
}
$(function () {
//配置项
luckysheet.create(options)
})
function uploadExcelData() {
//console.log(luckysheet.getAllSheets());
//console.log("lll=" + JSON.stringify(luckysheet.getAllSheets()));
//上传例子，可以把这个数据保存到服务器上。下次可以从服务器直接加载luckysheet数据了。
$.post("/excel/uploadData", {
exceldatas: JSON.stringify(luckysheet.getAllSheets()),
title: options.title,
}, function (data) {
//console.log("data = " + data)
alert("保存成功！")
});
}
function downExcelData() {
//这里你要自己写个后台接口，处理上传上来的Excel数据，用post传输。我用的是Java后台处理导出！这里只是写了post请求的写法
$.post("/excel/downfile", {
exceldatas: JSON.stringify(luckysheet.getAllSheets()),
}, function (data) {
//console.log("data = " + data)
});
}
</script>
</html>
扫一扫
7730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
