# 背景最近公司项目有需求, 某导入功能, 想让客户选完excel文件, 直接将加载到web的excel编辑器中, 修改、确认, 之后上传导入。以此来记录我的开发过程。 # 效果查看 ![Kapture 2023-04-13 at 13.37.05.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48e5f0755a7742eb89b6bfd36f0cc7e9~tplv-k3u1fbpfcp-watermark.image?) # 选择 * Luckysheet(https://dream-num.github.io/LuckysheetDocs/zh/guide/#demo) ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。 * x-sheet 就看到了这两个, 最后选择了`Luckysheet`, 看他的star比较多, 哈哈。 # 需求实现分析分析一下整个流程。其实大体就两步，搞进去，抽离出来。 ## 一、加载本地excel到web编辑器中 ### 1、拿到本地excel文件流 ### 2、转换为 `Luckysheet` 要的格式 ### 3、new 一个 `Luckysheet` 实例, 挂在到对应标签上完成以上就把excel加载进去了, 显示出来了。在线编辑的事就是这个库帮咱们搞定了. ## 二、从web编辑器导出文件流上传等客户在线编辑完成, 就需要点击一个按钮，导出文件流，确认并调接口上传 ### 1、获取 `Luckysheet`里工作表的数据 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d964b57e7ca4f439761df80c22f11b8~tplv-k3u1fbpfcp-watermark.image?) luckysheet.getAllSheets() ### 2、将数据加工并使用xlsx或者exceljs导出文件流导出为为arrayBuffer, 再将arrayBuffer转为Blob ### 3、调后端接口上传 # 开发实践 ## 一、引入 `lucky-sheet` 有两种方式 ### 1、官方文档里的cdn 这种加载有点慢 ### 2、自己打包, 传到oss, 引入(推荐) > 第一种第三方的cdn不稳定, 有时候很慢，还是建议，拉他的仓库，然后打个包，传到自己静态资源库, 来使用 clone 这个仓库 https://gitee.com/mengshukeji/Luckysheet `npm run build`后`dist` 传上去使用。 ## 二、指定容器这个是挂载 luckysheet 的容器, 它确保了被展示在何处。 ` id="luckysheet"` 可以自定义, 和下面提到的 `container: 'luckysheet'` 保持一致即可

## 三、导入本地文件 ### 1、用elment的上传文件组件选择文件但是这里不上传，仅仅是用它选择文件拿到文件对象`File`

### 2、`beforeUpload` 方法拿到文件 const beforeUpload = (file) => { console.log(file) } ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31346165d2f843c4bdaff60f0d7b8274~tplv-k3u1fbpfcp-watermark.image?) ### 3、将文件流转换为lucky要的格式这个是官方文档里推荐的转换包 https://github.com/dream-num/Luckyexcel#es-import #### 安装转换工具 npm install luckyexcel #### 使用 `file`是文件对象, 回调函数里的 `exportJson` 是转换玩的luckySheet对象 // After getting the xlsx file LuckyExcel.transformExcelToLucky(file, function(exportJson, luckysheetfile){ // exportJson就是转换后的数据 }, function(error){ // handle error if any thrown } ### 4、将转换后的数据创建表格 // 将拿到的数据创建表格 luckysheet.create({ container: 'luckysheet', // 挂载的dom的id名 data:exportJson.sheets, title:exportJson.info.name, userInfo:exportJson.info.creator, lang: 'zh', // 设定表格语言 myFolderUrl: window.location.href, showtoolbarConfig: { pivotTable: false, //'数据透视表' // protection: false, // '工作表保护' print:false, // '打印' image: false, // 插入图片 }, showinfobar: false, options: { // 其他配置 userImage:'http://qzz-static.forwe.store/public-assets/pgy_kj_pic_logo.png?x-oss-process=image/resize,m_fill,w_72,h_72', // 头像url userName:'Lucky', // 用户名 } }); ### 完整代码 const beforeUpload = (file) => { console.log(file) // 转换工具, 将文件流转换为lucky要的格式 LuckyExcel2.transformExcelToLucky( file, function(exportJson, luckysheetfile){ isShowExcel.value = true console.log(exportJson) nextTick(() => { window.luckysheet.destroy(); // 将拿到的数据创建表格 luckysheet.create({ container: 'luckysheet', // luckysheet is the container id data:exportJson.sheets, title:exportJson.info.name, userInfo:exportJson.info.creator, lang: 'zh', // 设定表格语言 myFolderUrl: window.location.href, showtoolbarConfig: { pivotTable: false, //'数据透视表' // protection: false, // '工作表保护' print:false, // '打印' image: false, // 插入图片 }, showinfobar: false, options: { // 其他配置 userImage:'http://qzz-static.forwe.store/public-assets/pgy_kj_pic_logo.png?x-oss-process=image/resize,m_fill,w_72,h_72', // 头像url userName:'Lucky', // 用户名 } }); }) }, function(err){ logger.error('Import failed. Is your fail a valid xlsx?'); }); } ## 四、导出 ### 1、利用 `luckysheet.getAllSheets()` 获取表数据 console.log(luckysheet.getAllSheets()) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7e5ac63ad724d43906ccce12fa07702~tplv-k3u1fbpfcp-watermark.image?) ### 2、exceljs将上述对象转换为excel文件流 import Excel from 'exceljs' // 导出excel const exportExcel = async function (luckysheet) { // 参数为luckysheet.getluckysheetfile()获取的对象 // 1.创建工作簿，可以为工作簿添加属性 const workbook = new Excel.Workbook() // 2.创建表格，第二个参数可以配置创建什么样的工作表 luckysheet.every(function (table) { if (table.data.length === 0) return true const worksheet = workbook.addWorksheet(table.name) // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值 setStyleAndValue(table.data, worksheet) setMerge(table.config.merge, worksheet) setBorder(table.config.borderInfo, worksheet) return true }) // 4.写入 buffer const buffer = await workbook.xlsx.writeBuffer() return buffer } ### 3、写个方法，执行上述两步 // 保存文件 const onClickSaveFile = async ( ) => { console.log(luckysheet.getAllSheets()) const buf = await exportExcel(luckysheet.getAllSheets()) const blob = new Blob([buf]); // $emit('file', blob) handleUpload(blob) } ### 4、上传方法从上一步拿到文件, 利用formData, 将生成的文件二进制流发给后端 const handleUpload = async(file) => { // isShowExcel.value = false const loading = ElLoading.service({ fullscreen: true, text: '上传中，请稍等', background: 'rgba(0,0,0,0.1)' }); try { const formData = new FormData() formData.append('file', file) // 伪代码 const {code, data, message } = await IMPORT_OKR(formData) if(code === 1) { //... } loading.close() } catch (error) { console.log(error) loading.close() } } # 遇到问题 ### 1、iconfont冲突 lucky-sheet这个项目里的`iconfont`类名和我项目里一样，导致有些被覆盖了. ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab3a97f151284a759dbd45375c9c0eb4~tplv-k3u1fbpfcp-watermark.image?) 解决: 将他项目里 `iconfont` 换成 `lucky-sheet`, 相关类名也全部替换, 然后重新打包，再引入，即可解决 ### 2、lucky-sheet层级不够高，无法编辑 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/05a9af451fd4494ea9c319c2bfa6bfae~tplv-k3u1fbpfcp-watermark.image?) elmentui和antd的一些组件层级比较高，所以, 让kucky的层级更高即可解决: 增加下述css即可 ``` .luckysheet-input-box { z-index: 2000; } .luckysheet-cols-menu { z-index: 2001; } ``` 用过`lucky-sheet`的朋友们还遇到了什么坑？评论区告诉我 # 最后妥妥的都是站在巨人的肩膀上，感谢开发`luckySheet`的大佬们。那么你们说产品下次是不准备搞协同编辑？欢迎各位评论区交流求赞