vue-electron中修改表格内容和样式的方法
需求
将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽高合并颜色等)不能改变。
技术
-
electron
-
xlsx
-
xlsx-style
-
node-xlsx
yarn add xlsxyarn add xlsx-styleyarn add node-xlsx
xlsx-style
xlsx-style 的一些源码修改是根据网上一些博主的文章来的。如下所示:
使用xlsx-style 的时候要注意,使用的是会报错误,所以,我们需要改他的源码,下面是正确的修改方式,代码如下(示例)
# 第一步 修改nod_modules 里面xlsx-style文件夹下面dist文件夹下的cpexcel.js文件807: var cpt = cptable;# 第二步 修改xlsx-style文件夹下面ods.js文件10: return require('./' + 'xlsx').utils;12: try { return require('./' + 'xlsx').utils; }# 第三步 修改xlsx-style文件夹下面的xlsx.js文件 替换write_ws_xml_data以下方法var DEF_PPI = 96, PPI = DEF_PPI;function px2pt(px) { return px * 96 / PPI; }function pt2px(pt) { return pt * PPI / 96; }function write_ws_xml_data(ws, opts, idx, wb) { var o = [], r = [], range = safe_decode_range(ws['!ref']), cell, ref, rr = "", cols = [], R, C,rows = ws['!rows']; for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C); for(R = range.s.r; R <= range.e.r; ++R) { r = []; rr = encode_row(R); for(C = range.s.c; C <= range.e.c; ++C) { ref = cols[C] + rr; if(ws[ref] === undefined) continue; if((cell = write_ws_xml_cell(ws[ref], ref, ws, opts, idx, wb)) != null) r.push(cell); } if(r.length > 0){ params = ({r:rr}); if(rows && rows[R]) { row = rows[R]; if(row.hidden) params.hidden = 1; height = -1; if (row.hpx) height = px2pt(row.hpx); else if (row.hpt) height = row.hpt; if (height > -1) { params.ht = height; params.customHeight = 1; } if (row.level) { params.outlineLevel = row.level; } } o[o.length] = (writextag('row', r.join(""), params)); } }if(rows) for(; R < rows.length; ++R) { if(rows && rows[R]) { params = ({r:R+1}); row = rows[R]; if(row.hidden) params.hidden = 1; height = -1; if (row.hpx) height = px2pt(row.hpx); else if (row.hpt) height = row.hpt; if (height > -1) { params.ht = height; params.customHeight = 1; } if (row.level) { params.outlineLevel = row.level; } o[o.length] = (writextag('row', "", params)); }} return o.join("");}
全部代码
upload方法分析
通过pdfWord.testImage()读取到表格(node环境),然对list数据里面的表格进行内容的修改以及填充,修改内容以后就将其样式调整以及转换数据类型并下载
testImage() { const a2 = path.join('C://Users//op//Desktop', '副本.xlsx') const sheets = xlsx.parse(a2); //读取xlxs的sheet1 const sheetData = sheets[0].data; return sheets[0].data; },
-
openDownloadDialog 下载
-
sheet2blob 将样式修改后的表格转为blob格式
-
xlsxAddStyle 修改样式
其他的属性大家可以看文档即可看明白,我只能大家说一下三个自认为比较重要的东西
1."!cols"(代码中:sheet["!cols"])= 指每列单元格一列的宽度,按先后顺序排列
2."!rows"(代码中:sheet["!rows"])= 指每行单元的一行的高度,按先后顺序排列
3."!merges"(代码中:sheet["!merges"])= 指合并;没有先后顺序。s:开始 e:结束 r:列 c:行
以上三种都是可以让用户自己控制的属性,至于其他的就需要你们根据自己的需求进行调整了
在修改样式中我们会看到element一个变量;他们可以去打印这个变量查看其中的属性;你们可以到时里面有许多样式结构,你只需要根据自己想要的去修改即可。