vue-electron中修改表格内容并修改样式以及页边距和打印

最新推荐文章于 2023-05-26 15:19:16 发布

雾恋

最新推荐文章于 2023-05-26 15:19:16 发布

阅读量516

点赞数

文章标签： vue.js electron 前端 javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_50307964/article/details/132974010

版权

需求

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

技术

electron
xlsx
xlsx-style
node-xlsx

javascript yarn add xlsx yarn add xlsx-style yarn add node-xlsx

xlsx-style

xlsx-style 的一些源码修改是根据网上一些博主的文章来的。如下所示：

使用xlsx-style 的时候要注意，使用的是会报错误，所以，我们需要改他的源码，下面是正确的修改方式，代码如下(示例)

```javascript

第一步修改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文件替换writewsxml_data以下方法

```

打印页边距以及打印功能修改源码

node_modules里找到xlsx-style 找到 xlsx.js 搜索关键词

增加缩放,设置纵横向设置打印纸张大小功能搜索关键词 write_ws_xml_pagesetup 把此函数改为

```javascript // 打印属性设置 function writewsxml_pagesetup(setup) { var pageSetup = writextag('pageSetup', null, { paperSize: setup.pagesize || "9", // 纸张大小 9为A4纸 scale: setup.scale || '100', // 缩放大小 orientation: setup.orientation || 'portrait', // 纸张方向 landscape 为横向 portrait 为纵向 horizontalDpi : setup.horizontalDpi || '4294967292', verticalDpi : setup.verticalDpi || '4294967292' }) return pageSetup; }

```

搜索关键字 write_ws_xml 替换为

```javascript function writewsxml(idx, opts, wb) { var o = [XMLHEADER, WSXML_ROOT]; var s = wb.SheetNames[idx], sidx = 0, rdata = ""; var ws = wb.Sheets[s]; if(ws === undefined) ws = {}; var ref = ws['!ref']; if(ref === undefined) ref = 'A1'; o[o.length] = (writextag('dimension', null, {'ref': ref}));

var sheetView = writextag('sheetView', null,  {
  showGridLines: opts.showGridLines == false ? '0' : '1',
  tabSelected: opts.tabSelected === undefined ? '0' :  opts.tabSelected,
  workbookViewId: opts.workbookViewId === undefined ? '0' : opts.workbookViewId
});
o[o.length] = writextag('sheetViews', sheetView);

if(ws['!cols'] !== undefined && ws['!cols'].length > 0) o[o.length] = (write_ws_xml_cols(ws, ws['!cols']));
o[sidx = o.length] = '<sheetData/>';
if(ws['!ref'] !== undefined) {
  rdata = write_ws_xml_data(ws, opts, idx, wb);
  if(rdata.length > 0) o[o.length] = (rdata);
}
if(o.length>sidx+1) { o[o.length] = ('</sheetData>'); o[sidx]=o[sidx].replace("/>",">"); }

if(ws['!merges'] !== undefined && ws['!merges'].length > 0) o[o.length] = (write_ws_xml_merges(ws['!merges']));

if (ws['!margins'] !== undefined) o[o.length] =  write_ws_xml_margins(ws['!margins']); // 页边距 !!! 必须要先设置页边距

if (ws['!pageSetup'] !== undefined) o[o.length] =  write_ws_xml_pagesetup(ws['!pageSetup']); // 缩放 纵横向
if (ws['!rowBreaks'] !== undefined) o[o.length] =  write_ws_xml_row_breaks(ws['!rowBreaks']);
if (ws['!colBreaks'] !== undefined) o[o.length] =  write_ws_xml_col_breaks(ws['!colBreaks']);

if(o.length>2) { o[o.length] = ('</worksheet>'); o[1]=o[1].replace("/>",">"); }
return o.join("");

}

```

增加页边距设置搜索关键词 write_ws_xml_pagesetup 在此函数下方增加如下两个函数

```javascript function writewsxmlmargins(margin) { let margin2 = defaultmargins(margin); return writextag('pageMargins', null, margin2); } function default_margins(margins, mode) { if(!margins) return; var defs = [0.7, 0.7, 0.75, 0.75, 0.3, 0.3]; if(mode == 'xlml') defs = [1, 1, 1, 1, 0.5, 0.5]; if(margins.left == null) margins.left = defs[0]; if(margins.right == null) margins.right = defs[1]; if(margins.top == null) margins.top = defs[2]; if(margins.bottom == null) margins.bottom = defs[3]; if(margins.header == null) margins.header = defs[4]; if(margins.footer == null) margins.footer = defs[5]; return margins }

```

在 write_ws_xml 函数里增加调用 ,在上方 ““增加缩放,设置纵横向设置打印纸张大小功能”” 功能里已经增加过了注意页边距必须在缩放之前设置不然会导致导出错误!!!

```javascript if (ws['!margins'] !== undefined) o[o.length] = writewsxml_margins(ws['!margins']); // 页边距 !!! 必须要先设置页边距

```

全部代码

upload方法分析

通过pdfWord.testImage()读取到表格(node环境)，然对list数据里面的表格进行内容的修改以及填充，修改内容以后就将其样式调整以及转换数据类型并下载

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

```javascript

主要按钮

```

今天的内容到这里就结束了。

如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】

往期文章