xlsx模块 前端_利用xlsx-syle前端导出excel且支持自定义样式

利用xlsx-syle前端导出excel且支持自定义样式

前言

本文的代码是基于react的。

本文仅用于记录我在前端导出excel遇到的问题的笔记整理。

需求描述

需要前端来实现对数据的导出，导出成excel格式。

excel打开后的样式要符合需求图

需求图：

导出1.png

前期解决过程

我在网上找到前端用于导出的插件js-xlsx，按照操作说明鼓捣完成后导出excel的样子只是最基础的模板

导出2.png

当我想进一步去修改样式，让他达到需求那样，结果发现xlsx插件开源版不支持修改excel的样式，需要付费版才有支持功能，然而付费要700美元，果断放弃。

后来我找到了xlsx-style插件可以代替，它支持修改样式且是免费的。

中期解决过程

然而xlsx-style插件不像js-xlsx插件那样乖巧，在安装和引入阶段也会有各种问题

import引入xlsx-stle时一般都会报错：This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

这个问题需要去修改xlsx-style插件里的源码，即要改动node_modules文件夹。

然而对于非本地demo的项目来说，node_modules因是存放依赖的，且很大，代码提交或上传时都会忽略node_modules，需要使用时才会安装依赖，就算改动xlsx-style的源码，依赖重新安装后也会被覆盖掉。

这个问题可以藉由将这个依赖的代码从node_modules拿出来放在项目里，在最外层index.html里引入即可。

然而对于高版本的Hzero，最外层的index.html文件被隐藏了，无法引入，需要把node_modules/hzero-boot/public/index.html的index.html文件复制到外层public文件夹下，才可以使用。

此时xlsx-style插件已经全局引入了，可以开始写导出功能了。

导出功能的代码

导出的方法

function saveAs(obj, fileName) {

const tmpa = document.createElement('a');

tmpa.download = fileName || '未命名';

// 兼容ie

if ('msSaveOrOpenBlob' in navigator) {

window.navigator.msSaveOrOpenBlob(obj, '下载的文件名' + '.xlsx');

} else {

tmpa.href = URL.createObjectURL(obj);

}

tmpa.click();

setTimeout(function() {

URL.revokeObjectURL(obj);

}, 100);

}

function s2ab(s) {

if (typeof ArrayBuffer !=