sheetjs 使用简介
xlsx js 的使用笔记
最近项目需要前端导出excel,以及解析excel,使用了 xlsx 这个包。简单介绍一下遇到的问题和快速上手使用代码。
- 先来段导出生产excel 的代码片段。我们演示如何把一个二维数组导入excel。代码如下，非常简单。
import xlsx from 'xlsx';
// write rows:any[][] to some sheet
createSheetFromAoa(aoa: any[][]) {
let ws = xlsx.utils.aoa_to_sheet(aoa);
ws['!cols'] = this.fitToColumn(aoa);
return ws;
}
// just make the cells auto-fit, make the width to the max width of same column
fitToColumn(arrayOfArray: any[][]) {
// get maximum character of each column
return arrayOfArray[0].map((a, i) => ({
wch:
Math.max(
...arrayOfArray
.map((a2) => a2[i]?.toString()?.length)
.filter((it) => it > 0)
) + 3,
}));
}
const rows=[
['head1','head2','head3'],
[1,2,3],
[4,5,6],
[7,8,9]
]
// create workbook first
const wb: xlsx.WorkBook = xlsx.utils.book_new();
const ws: xlsx.WorkSheet = createSheetFromAoa(rows);
xlsx.utils.book_append_sheet(wb,ws,'TabName');
xlsx.writeFile(wb, 'helloworld.xlsx');
- 再来一段从excel 中读取的代码片段，代码如下。
const reader = new FileReader();
reader.onload = (e) => {
var data = new Uint8Array(e.target.result as any);
let wb = xlsx.read(data, {
type: 'array',
});
this.parseWorkBook(wb);
};
reader.readAsArrayBuffer(this._uploadedFile as File);
//parse workbook
function parseWorkBook(wb:xlsx.WorkBook){
const ws = wb.Sheets['TabName'];
// mark the first row is header
const rows = xlsx.utils.sheet_to_json(ws,{header:1});
const header=rows[0];
const body = rows.slice(1);
}
- 这个里面需要注意的几个问题，第一个是 类型转换，excel 认识int,double,boolean,Date.这个要注意了。看是不是你需要的，可以通过迭代，rows 来解析里面的内容。
- 第二个问题就是Date，这个格式，excel 对于时间这个格式是有问题的，例如，我们再excel 里面写的是2021-8-5,当我们解析到内存里变成Date 后就变成了2020-8-4,为什么呢，因为来自于excel 的时间是一个很大的数字。这个数字换成时间后，会差1到几秒不等，所以就差了一天了。那么怎么解决. 用下面的toexcel fromexcel 来先做转换，然后在传给excel 或者， 解析excel 里面上来的值。
getDateMapping() {
return {
toexcel: (val: string) => {
try {
return val?.length ? DateTime.fromISO(val).toJSDate() : null;
} catch (ex) {
return null;
}
},
fromexcel: (val: number) => {
try {
//https://github.com/SheetJS/sheetjs/issues/1223
return val > 0
? DateTime.fromMillis(Math.round((val - 25569) * 86400 * 1000))
.setZone('utc')
.toFormat('yyyy-MM-dd')
: null;
} catch (ex) {
return null;
}
},
};
}
- 最后一个问题，excel 里面我们可以给某一列添加个Data Validation, 这样，某一列的内容就是一个dropdown. 目前免费版的xlsx 里面不支持。但是网上大神给了解决方法。需要修改 xlsx 的源码。
这个是修改后的npm, 修改如下：
bits_wsxml.jsfunction write_ws_xml(idx/*:number*/, opts, wb/*:Workbook*/, rels)
首先在这个方法前面添加一个这个方法。
function write_ws_xml_datavalidation(validations) {
var o = '<dataValidations>';
for(var i=0; i < validations.length; i++) {
var validation = validations[i];
o += '<dataValidation type="list" allowBlank="1" sqref="' + validation.sqref + '">';
o += '<formula1>"'+validation.values+'"</formula1>';
o += '</dataValidation>';
}
o += '</dataValidations>';
return o;
};
然后在write_ws_xml 找到如下片段，做如下修改
if(ws['!merges'] != null && ws['!merges'].length > 0) o[o.length] = (write_ws_xml_merges(ws['!merges']));
+ if(ws['!dataValidation']!=null && ws['!dataValidation'].length>0) o[o.length] = write_ws_xml_datavalidation(ws['!dataValidation']);
- 最后提一下编译sheetjs 并且发布npm 的问题。在pakcage.json 里面scripts 添加了如下一个命令。 首先我们run npm run build,会编译生成.xlsx.js的文件,然后运行如下命令可以压缩这个文件到dist/xxx下面。
"uglifyjs-xlsx": "uglifyjs xlsx.js -o ./dist/xlsx.min.js --source-map ./dist/xlsx.min.map"
- 发布的时候，在有账号的前提下,run npm publish 如果是私有的仓储，run npm publish --registry="http://xxx..xxx/", 期间会报401,403 等错误，只要账号激活，没有重名，就可以解决这类错误。
- 几个npm 的命令。
npm login/logout 这个是用来登入以及登出的，可以添加 --registry 指定仓储，默认是npm
npm adduser 这个是注册账号的。 - 在往私有仓储推代码后，拉取的时候报错了。后来通过
npm config set @internal:registry http://xxx, 然后npm install @internal/xlsx就可以了，不明白，我通过npm install @internal/xlsx --registry http://xxxx一直报403/401
