配套demo在这里
SheetJS是前端导出Excel文件的利器，通过很简单的方法就可以实现导出xls、xlsx、odd等格式的文件。
官方github：https://github.com/SheetJS/js-xlsx
但是SheetJS免费版本支持的格式太少，包括居中、自动换行、冻结等都不行。github上有一个开源的库：xlsx-style。该库是从SheetJS fork出来的，也就是在SheetJS的基础上进行开发的，所以使用xlsx-style就不需要再在项目中引入SheetJS了。
NOTE: That project is a fork of the original (and awesome) SheetJS/xlsx project.
基础
如果你刚开始写SheetJS，强烈推荐你先看SheetJS基础教程。
看完该教程，你已经学会了合并单元格，xlsx文件读取与导出，xlsx与其他格式的转换等。
如果需要增加格式，可以使用另一个开源的库：xlsx-style
成果
我最后导出的Excel的样子：
resultExcel.png
使用到的功能：
- 文字居中
- 自动换行
- 列宽设置
- 单元格合并
- 冻结表头等
- SheetJS文档： https://docs.sheetjs.com/
- xlsx-style：https://github.com/protobi/js-xlsx 尤其是项目里的example和test
安装
xlsx-style的README文档上的安装方式：
使用 npm:
$ npm install xlsx-style --save
但是我安装后，总是会报错
This relative module was not found:
./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js
如果你安装的时候没问题，最好直接使用npm的方式
-
直接手动安装
// 下载项目到本地 $ git clone https://github.com/protobi/js-xlsx
然后把 js-xlsx-master/dist/ 路径下的 xlsx.core.min.js、xlsx.js、jszip.js 三个文件拖拽到项目里。你也可以直接使用 xlsx.full.min.js。
然后在index.html中引入就可以用了。
下面是我放的位置，供参考。
image-20191213161055737.png
使用
请先阅读基础教程
- 定义文字字体、大小、居中和换行：
// 设置表格中cell默认的字体，居中，颜色等
defaultCellStyle: {
font: { name: "宋体", sz: 11, color: { auto: 1 } },
border: {
color: { auto: 1 }
},
alignment: {
/// 自动换行
wrapText: 1,
// 居中
horizontal: "center",
vertical: "center",
indent: 0
}
}
- 在生成CellObject的时候添加这个defaultStyle。
// 从json转化为sheet，xslx中没有aoaToSheet的方法，该方法摘自官方test
sheet_from_array_of_arrays(data) {
const ws = {};
const range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
for(let R = 0; R !== data.length; ++R) {
for(let C = 0; C !== data[R].length; ++C) {
if(range.s.r > R) range.s.r = R;
if(range.s.c > C) range.s.c = C;
if(range.e.r < R) range.e.r = R;
if(range.e.c < C) range.e.c = C;
/// 这里生成cell的时候，使用上面定义的默认样式
const cell = {v: data[R][C], s: this.defaultCellStyle};
if(cell.v == null) continue;
const cell_ref = XLSX.utils.encode_cell({c:C,r:R});
/* TEST: proper cell types and value handling */
if(typeof cell.v === 'number') cell.t = 'n';
else if(typeof cell.v === 'boolean') cell.t = 'b';
else if(cell.v instanceof Date) {
cell.t = 'n'; cell.z = XLSX.SSF._table[14];
cell.v = this.dateNum(cell.v);
}
else cell.t = 's';
ws[cell_ref] = cell;
}
}
/* TEST: proper range */
if(range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
},
- 冻结列表
// 冻结前6行和第1列，右方下方 可以滑动
// 这里xSplite和ySplite不能设置为0，否则下载下来Excel解析会出现错误
sheet["!freeze"] = {
xSplit: "1",
ySplit: "6",
// 坐上角是哪个cell
topLeftCell: "B7",
activePane: "bottomRight",
state: "frozen",
}
- 列宽设置
/// wch不是像素宽度！！！这个数值具体换算不太清楚，在Excel里拉动的时候会显示
/// https://docs.sheetjs.com/#column-properties 这里有解释
const sheetCols = [
{ wch: 8} , // 序号
{ wch: 10 }, // 市别
{ wch: 20 }, // 示范工程项目名称
{ wch: 9 }, // 联运线路(条)
];
下面是我最后的代码
导出用的是FileSaver
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
const workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet
window.console.log(workbook)
// 生成excel的配置项
const wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
const wbout = XLSX.write(workbook, wopts, { defaultCellStyle: this.defaultCellStyle });
const blob = new Blob([s2ab(wbout)], {type: "application/octet-stream"});
// 字符串转ArrayBuffer
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i=0; i!==s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
},
transformF() {
// 表头信息 要合并的字段用null代替
let aoa = [
['江苏省多式联运示范工程项目2019年第二季度动态监测信息表'],
['序号', '市别', '示范工程项目名称', '示范工程项目运行情况'],
[null, null, null, '联运组织',null, null, null, null, null, null, '企业总货物运输量（万吨/万标箱）', null, '枢纽场站建设投资额（万元）', '装备配备建设投资额（万元）', '信息化建设投资额（万元）', '其他'],
[null, null, null, '联运线路（条）','联运线路运营情况', null, null, null, null, null],
[null, null, null, null, '线路', '联运路线', '联运模式', '联运量', null, '联运周转量（万吨公里）', null, null, null, null, null, null],
[null, null, null, null, null, null, null, '万吨', '万标箱', null, '万吨', '万标箱', null, null, null],
]
// json => sheet
const sheet = this.sheet_from_array_of_arrays(aoa);
// 表头合并： r: row 行；c:column 列
const mergeTitle = [
// 江苏省多式联运示范工程项目2019年第二季度动态监测信息表
{
s: {r: 0, c: 0},
e: {r: 0, c: 15}
},
// 序号
{
s: {r: 1, c: 0},
e: {r: 5, c: 0}
},
// 市别
{
s: {r: 1, c: 1},
e: {r: 5, c: 1}
},
// 示范工程名称
{
s: {r: 1, c: 2},
e: {r: 5, c: 2}
},
// 示范工程项目运行情况
{
s: {r: 1, c: 3},
e: {r: 1, c: 15}
},
// 联运组织
{
s: {r: 2, c: 3},
e: {r: 2, c: 9}
},
// 联运线路(条)
{
s: {r: 3, c: 3},
e: {r: 5, c: 3}
},
// 联运线路运营情况
{
s: {r: 3, c: 4},
e: {r: 3, c: 9}
},
// 线路
{
s: {r: 4, c: 4},
e: {r: 5, c: 4}
},
// 联运路线
{
s: {r: 4, c: 5},
e: {r: 5, c: 5}
},
// 联运模式
{
s: {r: 4, c: 6},
e: {r: 5, c: 6}
},
// 联运量
{
s: {r: 4, c: 7},
e: {r: 4, c: 8}
},
// 联运周转量(万吨公里)
{
s: {r: 4, c: 9},
e: {r: 5, c: 9}
},
// 企业总货物运输量（万吨/万标箱）
{
s: {r: 2, c: 10},
e: {r: 4, c: 11}
},
// 枢纽场站建设投资额（万元）
{
s: {r: 2, c: 12},
e: {r: 5, c: 12}
},
//装备配备建设投资额（万元）
{
s: {r: 2, c: 13},
e: {r: 5, c: 13}
},
// 信息化建设投资额（万元）
{
s: {r: 2, c: 14},
e: {r: 5, c: 14}
},
// 其他
{
s: {r: 2, c: 15},
e: {r: 5, c: 15}
},]
sheet['!merges'] = mergeTitle.concat(mergeContent);
// 冻结前6行和第一列，右下可以滑动
sheet["!freeze"] = {
xSplit: "1",
ySplit: "6",
topLeftCell: "B7",
activePane: "bottomRight",
state: "frozen",
}
sheet["!margins"] = { left: 1.0, right: 1.0, top: 1.0, bottom: 1.0, header: 0.5, footer: 0.5 }
// 列宽 使用的不是像素值
const sheetCols = [
{ wch: 8} , // 序号
{ wch: 10 }, // 市别
{ wch: 20 }, // 示范工程项目名称
{ wch: 9 }, // 联运线路(条)
{ wch: 8 }, // 线路
{ wch: 18 }, // 联运路线
{ wch: 15 }, // 联运模式
{ wch: 9 }, // 联运量-万吨
{ wch: 9 }, // 联运量-万标箱
{ wch: 12 }, // 联运周转量
{ wch: 9 }, // 企业万吨
{ wch: 9 }, // 企业 万标箱
{ wch: 10 }, // 枢纽站
{ wch: 10 }, // 装备
{ wch: 10 }, // 信息化
{ wch: 27 }, // 备注
];
sheet['!cols'] = sheetCols;
// 设置行高，但是没起作用
/*
* type RowInfo = {
hidden?: boolean; // if true, the row is hidden
/// row height is specified in one of the following ways:
hpx?: number; // height in screen pixels
hpt?: number; // height in points
level?: number; // 0-indexed outline / group level
};*/
// sheet['!rows'] = [
// { hidden: true },
// { hpx: 44 },
// { hpt: 12 },
// { level: 1 },
// { level: 2 },
// { level: 3 },
// { level: 4 },
// null,null,null,null,null,
// null,null,null,null,null,
// null,null,null,null,null,
// null,null,null,null,null,
// ];
// sheet => bolb
const wbBlob = this.sheet2blob(sheet, '1')
// 保存下载
FileSaver.saveAs(wbBlob, 'd.xlsx')
},
几乎所有相关代码都已经贴出来了，希望有帮到你。
如果有其他格式我没有用到而你迫切需要，首先你可以看免费的SheetJS是否能满足你的需求。不够的话，可以去js-xlsx的查看文档或者下载官方的demo，查看是否有相应的test文件，文章里的很多属性也都是通过许多测试文件找到的。
最后，用餐愉快。
网友评论