建设公司网站的好处,保亭交通工程建设局网站,软件工程师简历,权威网站发布平台一、写在前面 工作中会遇到excel的导入和导出#xff0c;换个角度看#xff0c;假如有个 web 版本的excel #xff0c;且能上传现有的#xff0c;修改编辑后再下载也是个不错的方案。 Luckysheet 是实现 web版Excel的一个优秀的框架。 Luckysheet #xff0c;一款纯前端类… 一、写在前面 工作中会遇到excel的导入和导出换个角度看假如有个 web 版本的excel 且能上传现有的修改编辑后再下载也是个不错的方案。 Luckysheet 是实现 web版Excel的一个优秀的框架。 Luckysheet 一款纯前端类似excel的在线表格功能强大、配置简单、完全开源。 功能强大包含大量常用电子表格功能,替代你的excel配置简单最少的配置就能开始上手使用完全开源社区驱动,共同来完善你的想法 二、我的示例 我的DEMO效果如下 image.png 第一步添加依赖JS link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css /
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css /
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css /
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css /
script srchttps://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js/script
script srchttps://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js/script 第二步指定一个表格容器 div idluckysheet stylemargin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;/div 第三步创建一个 Excel 文档并展示 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像下面这样 link relstylesheet href./plugins/css/pluginsCss.css /
link relstylesheet href./plugins/plugins.css /
link relstylesheet href./css/luckysheet.css /
link relstylesheet href./assets/iconfont/iconfont.css /
script src./plugins/js/plugin.js/script
script src./luckysheet.umd.js/script 3.2 导入 一个 excel 文件 点击上传按钮弹窗选择一个文件随即文件出现来 页面的表格里。 一个file控件 input stylefont-size:16px; typefile changeuploadExcel / 绑定的js事件 uploadExcel(evt){const files evt.target.files;if(filesnull || files.length0){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.sheetsnull || exportJson.sheets.length0){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 idshowinfobar:false,data:exportJson.sheets,title:exportJson.info.name,userInfo:exportJson.info.name.creator});});}, 3.3 下载(另存为)Excel import { exportExcel } from ../js/export; 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:, // 指定返回上一页的URLshowinfobar:false,//是否显示顶部信息栏 更多参数见 https://dream-num.github.io/LuckysheetDocs/zh/guide/config.html#%E9%85%8D%E7%BD%AE%E9%A1%B9 示例 luckysheet.create({myFolderUrl:, // 指定返回上一页的URLshowinfobar:false,//是否显示顶部信息栏container: luckysheet, // 设定DOM容器的idtitle: Luckysheet 测, // 设定表格名称lang: zh, // 设定表格语言
}) 四、参考 感谢下面文章的作者撰写的好文。 中文文档https://dream-num.github.io/LuckysheetDocs/zh/https://dream-num.github.io/LuckysheetDocs/zh/guide/config.html#%E5%8D%95%E5%85%83%E6%A0%BC VUE示例https://github.com/dream-num/luckysheet-vue 在vue中简单使用Luckysheet(有下载功能示例)https://blog.csdn.net/weixin_41897680/article/details/123986004 官网地址https://github.com/dream-num/Luckysheet 官方文档https://mengshukeji.gitee.io/luckysheetdocs/zh/guide/https://www.cnblogs.com/recode-hyh/p/13168226.html 常见问题https://mengshukeji.gitee.io/LuckysheetDocs/guide/FAQ.html https://juejin.cn/post/7221368910139342907?share_token78cb819c-539d-4b8b-aae6-f67a0a357f82
