基于luckysheet在线表格的excel下载功能开发(代码片段)

recode-hyh recode-hyh     2022-11-29     802

关键词:

最近开发的项目中使用到了一个非常强大的在线表格展示库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)
    tmpWB.Sheets[name][‘!merges‘] = merge

//处理合并单元格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的在线表格,功能强大、配置简单、完全开源。实现功能格式设置样式(修改字体样式,字号,颜色或者其他通用的样式)条件格式(突出显示所关注的单元格或单元格区域&#x... 查看详情

基于纯前端类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列复制并粘贴到在... 查看详情