luckysheet+luckyexcel在线预览excel

最新推荐文章于 2025-10-24 12:39:01 发布

原创

最新推荐文章于 2025-10-24 12:39:01 发布 · 8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#excel #前端 #javascript

文章介绍了如何在Vue项目中集成Luckysheet和Luckyexcel来实现在线预览Excel的功能。通过手动引入Luckysheet的相关文件，安装Luckyexcel，然后编写Vue组件，结合Luckysheet的官方文档和示例，可以读取并展示带有样式的本地Excel文件。

luckysheet，是一款纯前端的在线excel，功能强大，完全开源
如果在线预览excel的需求，可以使用xlsx插件，但是这个插件只能解析表格中的数据，如果表格中的样式和数据都要解析出来，就需要luckysheet+luckyexcel方案，下面整理一下，vue项目中怎么使用
1.luckysheet需要手动引入相关文件

<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>

2.安装luckyexcel，npm i luckyexcel
3.写一个vue组件测试一下，根据luckysheet官方文档和demo可以进行配置，里面有很多配置，下面的代码是参考官方demo的，删减了一下，主要需求是打开本地excel，先看一下打开效果(本地excel带样式的，在线打开还是带样式的)