关键词:
最近开发的项目中使用到了一个非常强大的在线表格展示库Luckysheet
下面记录一下基于luckysheet的下载功能的开发
第一步:获取到要下载的数据。
LuckySheet给我们提供了一个获取所有sheet数据的方法 luckysheet.getluckysheetfile(),通过该方法我们可以得到所有的sheet的数据以及配置信息
let allSheetData = luckysheet.getluckysheetfile();
let sheet1 = allSheetData[0];
let downOriginData = sheet1.data;
// 该方法会返回一个数组结构,其中包含了我们所创建的所有的sheet数据
// allSheetData = [sheet1,sheet2,sheet3]
// 每个sheet的数据结果如下
"name": "sheet1", "color": "", "chart": [], "status": 0, "order": 0, "celldata": [],
"data":[], "row":90, "column":100, "index": 0, "visibledatarow": [], "visibledatacolumn": [], "rowsplit": [], "ch_width": 4629, "rh_height": 1681, "luckysheet_select_save": , "luckysheet_selection_range": , "scrollLeft": 0, "scrollTop": 0, "load": "1", "config": "columlen": , "rowhidden": , "pivotTable": , "isPivotTable": true, "calcChain": [], "filter":key1:value1, key2:value2, "filter_select":
data的数据结构
let arr = []; // 所有的单元格数据组成的二维数组 let bgConfig = ; let percentageReg = /%$/; let cellValue = null; // 获取单元格的背景色 function setBackground(row, col, bg) var colA = luckysheet.luckysheetchatatABC(col); var key = colA + (row + 1); bgConfig[key] = bg.replace(/#?/, ‘‘); // 判断值类型是否为百分比 % function isPercentage(value) return percentageReg.test(value.m) && value.ct && value.ct.t === ‘n‘ // 获取二维数组 for (let row = 0; row < downOriginData.length; row++) let arrRow = []; for (let col = 0; col < downOriginData[row].length; col++) if (cellValue = downOriginData[row][col]) // 处理单元格的背景颜色 if (cellValue.bg) setBackground(row, col, cellValue.bg) if (cellValue.ct != null && cellValue.ct.t == ‘d‘) // d为时间格式 2019-01-01 或者2019-01-01 10:10:10 arrRow.push(new Date(cellValue.m.replace(/-/g, ‘/‘))) //兼容IE else if (cellValue.m && isPercentage(cellValue)) //百分比问题 arrRow.push(cellValue.m) else arrRow.push(cellValue.v) arr.push(arrRow)
第二步:通过SheetJs将数据转化为excel格式数据
let opts = dateNF: ‘m/d/yy h:mm‘, cellDates: true, cellStyles: true let ws = XLSX.utils.aoa_to_sheet(arr, opts)
第三步:设置单元格的类型以及单元格样式
1 let reg = /[u4e00-u9fa5]/g; 2 for (let key in ws) 3 let item = ws[key] 4 if (item.t === ‘d‘) 5 if (item.w) 6 //时间格式的设置 7 let arr = item.w.split(‘ ‘) 8 if (arr[1] && arr[1] == ‘0:00‘) 9 ws[key].z = ‘m/d/yy‘ 10 else 11 item.z = ‘yyyy/m/d h:mm:ss‘ 12 13 14 else if (item.t === ‘s‘) 15 //百分比设置格式 16 if (item.v && !item.v.match(reg) && item.v.indexOf(‘%‘) > -1) 17 item.t = ‘n‘ 18 item.z = ‘0.00%‘ 19 item.v = Number.parseFloat(item.v) / 100 20 21 else if (item.v && item.v.match(reg)) 22 //含有中文的设置居中样式 23 item[‘s‘] = 24 alignment: vertical: ‘center‘, horizontal: ‘center‘ 25 26 27 28 // 设置单元格样式 29 if (bgConfig[key]) 30 ws[key][‘s‘] = 31 alignment: vertical: ‘center‘, horizontal: ‘center‘ , 32 fill: bgColor: indexed: 32 , fgColor: rgb: bgConfig[key] , 33 border: 34 top: style: ‘thin‘, color: rgb: ‘999999‘ , 35 bottom: style: ‘thin‘, color: rgb: ‘999999‘ , 36 left: style: ‘thin‘, color: rgb: ‘999999‘ , 37 right: style: ‘thin‘, color: rgb: ‘999999‘ 38 39 40 41
第四步:组装下载数据格式
let name = ‘sheet1‘; let tmpWB = SheetNames: [name], //保存的表标题 Sheets: [name]: Object.assign(,ws)//内容
第五步:合并单元格配置
let mergeConfig = sheet1.config.merge let mergeArr = []; if (JSON.stringify(mergeConfig) !== ‘‘) mergeArr = handleMergeData(mergeConfig)
//处理合并单元格config数据 function handleMergeData(origin)
let result = [] if (origin instanceof Object) var r = "r", c = "c", cs = "cs", rs = "rs"; for (var key in origin) var startR = origin[key][r]; var endR = origin[key][r]; var startC = origin[key][c]; var endC = origin[key][c]; // 如果只占一行 为1 如果占两行 为2 if (origin[key][cs] > 0) endC = startC + (origin[key][cs] - 1); if (origin[key][rs] > 0) endR = startR + (origin[key][rs] - 1); // s为合并单元格的开始坐标 e为结束坐标 var obj = s: "r": startR, "c": startC , e: "r": endR, "c": endC result.push(obj)
return result
第六步:写入文件
let fileName = ‘test‘;
// sheetjs js-xlsx 的方法 ,不能设置单元格格式 XLSX.writeFile(tmpWB,fileName + ".xlsx");
由于sheetJs 社区版本的方法不支持设置样式,可以选择Pro版本,需要付费,好像是 1000$
当然如果不需要设置背景色,单元格对齐方式,边框等样式,社区版就够用了。
另一种解决方法 xlsx-style,
function s2ab(s) if (typeof ArrayBuffer !== ‘undefined‘) var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; else var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF; return buf; function saveAs(obj, fileName) var tmpa = document.createElement("a"); tmpa.download = fileName || "download"; tmpa.href = URL.createObjectURL(obj); tmpa.click(); setTimeout(function () URL.revokeObjectURL(obj); , 100); ws = new Blob( [ s2ab( S_XLSX.write(tmpWB, bookType: ‘xlsx‘, bookSST: false, type: ‘binary‘ )//这里的数据是用来定义导出的格式类型 ) ] ) saveAs(ws, fileName + ‘.xlsx‘)
columnlen几万luckysheet导入
excel怎么操作可以通过以下步骤操作:1.首先,在luckysheet中新建一个表格,确定要导入excel文件中的列数,并调整luckysheet中表格的列数;2.然后,打开excel文件,选择要导入的数据,点击“复制”按钮;3.接着,在luckysheet中,选择... 查看详情
再见excel!最强国产开源在线表格luckysheet走红github
...pt编写的前端表格库,对它的评价只有【用它!】Luckysheet具备了大部分Excel中的常用功能,比如文字与单元格的样式调整与公式的使用等。除此之外还提供了独有的复制时转换格式(比如json等)以及其他格式... 查看详情
最强开源excel在线协同工具
参考技术A大家好,我是开源电子表格Luckysheet的作者。Luckysheet的github仓库在5个月内获得了6K+Star,获得码云GVP项目,已有腾讯、京东、华为、用友、微众银行等30+头部企业在用,社群服务600+开发者。在社区的积极反馈下,我们吸... 查看详情
vue实用功能vue实现文档在线预览功能,在线预览pdfwordexcelppt等office文件(代码片段)
文章目录@[TOC](文章目录)方法一、Luckysheet预览方法二、OfficeWeb查看器(微软的开发接口)方法三、XDOC文档预览云服务(预览pdf、word、xls、ppt)方法一、Luckysheet预览Luckysheet是一个类似于excel的在线电子表格,功能强大... 查看详情
vue实现在线预览excel(代码片段)
...le对象,得到想对应的数据4.将解析后得到的数据通过luckysheet进行展示二、安装依赖安装luckexcel:npmiluckyexcel安装lucksheet,由于lukysheet的引入方式只有两种cdn引入以及本地引入,暂不支持npm,因此此文采用本地... 查看详情
如何开发一款基于vite+vue3的在线excel表格系统(上)
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3。Vue32020年09月18日Vue.js3.0发布,经历了两年时间的对细节的不断优化与调整,终... 查看详情
如何开发一款基于vite+vue3的在线excel表格系统(上)
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3。Vue32020年09月18日Vue.js3.0发布,经历了两年时间的对细节的不断优化与调整,终... 查看详情
vue项目中引入luckysheet(代码片段)
Luckysheet介绍Luckysheet,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。实现功能格式设置样式(修改字体样式,字号,颜色或者其他通用的样式)条件格式(突出显示所关注的单元格或单元格区域... 查看详情
基于纯前端类excel表格控件实现在线损益表应用(代码片段)
财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金、利润状况的会计报表,由资产负债表、损益表、现金流量表或财务状况变动表、附表和附注构成。财务报表是财务报告的主要部分... 查看详情
excel怎么弄成在线编辑
...的共同创作体验,点击确定即可。参考技术Aexcel怎么弄成在线编辑,操作方法如下。1、首先打开在线文档,点击右上角三条杠更多图标。2、接着在更多页面选择导出为Excel文件。3、然后在打开的导出页面中,点击选择下载到本... 查看详情
如何开发一款在线excel表格系统(上)
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3。Vue32020年09月18日Vue.js3.0发布,经历了两年时间的对细节的不断优化与调整,终于在今年2月正式成... 查看详情
怎么多人在线编辑excel表格?
...息填写完成后就可以将表格完整地导出。参考技术A腾讯在线文档就可以呀,还可以指定用户编辑/查看权限。 参考技术B微信中使用腾讯文档文档小程序,可以创建需要类型的文档或表格 参考技术C你可以创建在线文档 参考技术... 查看详情
如何将excel表格转成在线文档
...到,直接打开使用。参考技术A回答在浏览器上打开腾讯在线文档,输入QQ号和密码进入。2点击左上方的”新建“按钮。3下拉选择”在线表格“。4在新建的EXCEL文档上,点击右上角的”文档操作-导入本地文件“。5在对话框里选... 查看详情
luckyexcel上传excel模版后,解析单元格问题
...都为'd',导致解析文件时,判断文件类型错误查看luckySheet源码,发现luckySheet中是通过flatpickr组件来输入日期类型的单元格内容的。在luckySheet源码 查看详情
如何在网页中嵌入excel控件,实现excel的在线编辑?
...excel表格嵌入到了网页里。参考技术A最快的方法就是使用在线Excel插件,在浏览器中嵌入这些功能。市面上比较好用的在线Excel插件,有SpreadJS纯前端表格控件、WebOffice控件等。如果要支持在线编辑的话,需要插件自带数据填报功... 查看详情
基于没有 Excel 功能的 Excel 文件更新表格?
】基于没有Excel功能的Excel文件更新表格?【英文标题】:UpdatingatablebasedonanExcelfilewithoutexcelfunctionality?【发布时间】:2016-04-2522:33:11【问题描述】:好的,所以我基本上有一个巨大的Excel列表,其中包含两列,ID和Value。我想在我... 查看详情
在线表格(代码片段)
以下内容是基于SpreadJS开发的。SpreadJS是一款基于HTML5的纯JavaScript电子表格和网格功能控件。一、配置使用(3分钟)实例代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>基于SpreadJS的在线Excel<</title><... 查看详情
从excel复制并粘贴到在线表格中
】从excel复制并粘贴到在线表格中【英文标题】:Copyfromexcelandpasteintoonlineform【发布时间】:2012-10-2815:14:53【问题描述】:首先我要为我不是最擅长电脑的事实道歉,我有一个相当大的Excel表格,我必须将每行10列复制并粘贴到在... 查看详情