vue-electron中修改表格内容并修改样式

目录

• 需求
• 技术
• xlsx-style
• 全部代码

需求

将表格导入并向其添加内容，然后导出表格，且表格样式（一般是值宽高合并颜色等）不能改变。

技术

• electron
• xlsx
• xlsx-style
• node-xlsx

yarn add xlsx
yarn add xlsx-style
yarn 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一个变量；他们可以去打印这个变量查看其中的属性；你们可以到时里面有许多样式结构，你只需要根据自己想要的去修改即可。

到此这篇关于vue-electron中修改表格内容并修改样式的文章就介绍到这了,更多相关vue-electron修改表格样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！