sheetJs+xlsx

2023-07-19 13:23| 来源: 网络整理| 查看: 265

之前写过一篇博客，是关于elementUi—table组件+xlsx插件实现导出——sheetJs的，之前实现的功能有：

根据dom获取内容创建工作簿调整单元格的宽度实现百分数的展示插入到工作表中导出到浏览器中

博客地址如下： elementUi—table组件+xlsx插件实现导出——sheetJs:https://blog.csdn.net/yehaocheng520/article/details/123554455?spm=1001.2014.3001.5501

但是上面的并不能完全满足用户的需求，用户需要实现单元格内容换行、设置单元格背景色及单元格内容居中等功能。

此时单纯的引入sheetJs是不能满足要求了，此时还需要一个xlsx-js的文件，专门用于处理sheetJs的样式问题。

我从网上找了好久，终于找到了对应的文件。

特别感谢大神的链接：使用js-xlsx纯前端导出excel:https://www.likecs.com/show-203708170.html

上面的地址内容超级详细，而且一步步的将内容引出并提供解决方案，这才是一篇好的技术博客，赞！！！

直接上解决办法，有空的同学可以仔细阅读上面的博客链接。

1. 引入两个js——xlsx.extendscript.js和xlsx.full.min.js

这两个文件其实可以通过使用npm的方式来安装到本地，然后就能从本地文件中找到响应的js了。

1.1 通过npm install xlsx

安装后dist文件夹下有一个文件xlsx.extendscript.js,引入到项目中

1.2 通过npm install xlsx-style

安装后dist文件夹下有一个文件xlsx.full.min.js，引入到项目中

大神提供的技术博客中，还提供了一个关于导出的封装后的js,叫export.js文件。这个文件中的内容并不多，可以单独引入，也可以直接将函数拷贝到页面上，我是直接拷贝的。下面会讲到。

2.上面的两个js暴漏出来的变量有冲突，都是XLSX,此时需要更改其中一个的变量

大神是直接更改的第一个文件的变量，我们可以直接跟随大神的操作步骤处理，防止出现不必要的麻烦。

建议大家不要自行修改了，以免出现问题，可以移驾到资源中心去下载修改好的文件或者点击下方链接直接下载

sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色，居中，自动换行，宽度，百分数展示等下载链接在这里插入图片描述下面介绍使用的详细步骤：

3.详细使用步骤 3.1 通过ref获取页面上的table组件 var table_dom = this.$refs['table1'].$el; 3.2 设置开头空几行属性，不需要空则设置为0行 var opt = { rowIndex: 0 }; //开头空0行 const new_sheet = XLSX2.utils.table_to_sheet(table_dom, opt); 3.3 设置单元格的居中及字号 for (let key in new_sheet) { if (key.indexOf('!') !== 0) { if (key == 'A1') { new_sheet[key]['s'] = { font: { sz: 20,//设置标题的字号 bold: true,//设置标题是否加粗 }, alignment: { horizontal: 'center', vertical: 'center', wrapText: true },//设置标题水平竖直方向居中，并自动换行展示 fill: { fgColor: { rgb: 'ebebeb' }//设置标题单元格的背景颜色 } }; } else { new_sheet[key]['s'] = { font: { sz: 10, }, alignment: { horizontal: 'center', vertical: 'center', wrapText: true }, }; } } };

上面的代码：如果是A1则表示是第一行，我这边的第一行是合并单元格后的标题部分

1. `font`：设置的是字体方面的样式 2. font>>> sz：设置的是字号 3. font>>>bold：字体加粗 4. alignment：设置单元格的居中及自动换行 5. alignment>>>horizontal:水平是否居中 6. alignment>>>vertical:竖直是否居中 7. alignment>>>wrapText:是否换行展示内容 8. fill：设置单元格的背景色等 9. fill>>>fgColor：设置背景色 3.4 设置单元格的宽度，此时需要每个单元格都进行设置 new_sheet['!cols'] = [ { wpx: 40 }, { wpx: 40 }, { wpx: 40 }, { wpx: 60 }, { wpx: 100 } } ]

如果相同的宽度比较多，则可以通过new Array.(20)fill({wpx:xxx})的方式来一次性添加20个相同的宽度，这样会简单一些。

3.5 添加百分数——%，需要提前确定是哪几列需要添加%，然后遍历时单独处理 for (let key in new_sheet) { console.log(key, new_sheet[key]); if (key.indexOf('S') == 0 || key.indexOf('T') == 0 || key.indexOf('U') == 0 || key.indexOf('V') == 0) { new_sheet[key]['z'] = '0.00%'; } }; 3.6 将工作簿添加到工作表中 XLSX2.utils.book_append_sheet(new_book, new_sheet, '出库日报'); 3.7 导出工作表 var wopts = { bookType: 'xlsx', // 要生成的文件类型 bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性 type: 'binary' }; var wbout = XLSX.write(new_book, wopts); var blob = new Blob([this.s2ab(wbout)], { type: "application/octet-stream" }); // 字符串转ArrayBuffer // 导出excel文件如导出后的文件不能打开，请将后缀替换为 .xls this.openDownloadDialog(blob, `(${this.getDateString(new Date())})广德云仓出库报表.xlsx`); // 导出excel文件如导出后的文件不能打开，请将后缀替换为 .xls },

上面用到了this.s2ab方法：

s2ab(s) { 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; },

还用到了openDownloadDialog

openDownloadDialog(url, saveName) { if (typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.href = url; aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效 var event; if (window.MouseEvent) event = new MouseEvent('click'); else { event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); } aLink.dispatchEvent(event); }

完成！！！导出的excel如下：在这里插入图片描述

【本文地址】

sheetJs+xlsx

sheetJs+xlsx

今日新闻

推荐新闻