workbook
: 可以理解为XLSX
对excel
文件描述的一个对象,可通过XLSX.utils.book_new()
来创建,该方法返回workbook
对象
worksheet
:可以理解为XLSX
对excel
中sheet
的描述的一个对象,可通过XLSX.utils.aoa_to_sheet
、XLSX.utils.json_to_sheet
、XLSX.utils.table_to_sheet
等方法创建,下面会具体讲每个方法的使用。
cellAddress
: 单元格的地址对象{ c: number, r: number }
,其中c
表示column
(列)r
表示row
(行)都是从0开始,即左上角的单元格地址是{c: 0, r: 0} ---> A1
打印
workshee
t对象,可以看到描述的相关信息例如{ !cols: [] !fullref: "A1:C3" !ref: "A1:C3" !rows: [] A1: {t: "s", v: "第一列A"} A2: {t: "s", v: "1-1A"} A3: {t: "s", v: "2-1A"} B1: {t: "s", v: "第二列A"} B2: {t: "s", v: "1-2A"} B3: {t: "s", v: "2-2A"} C1: {t: "s", v: "第三列A"} C2: {t: "s", v: "1-3A"} C3: {t: "s", v: "2-3A"} }
其中
!ref
描述了这个表格的范围(range
),第一个单元格是A1
最后一个单元格是C3
,下面的A1,A2,A3,B1...
就是每个单元格的描述t
是type
,表示类型,即s
就是string
型。v
是value
,表示值,每个单元格的数据。我们可以通过设置这个!ref
属性来截取表格的部分输出。表格的表头会用
A1,B1,C1..
.的v
值,所以如果想更改表头,可以遍历更改上面的值。比如通过
json_to_sheet
转化booksheet
对象,字段的A1,B1,C1....
等单元格中的是字段的key,此时我们可能希望表头是中文的,那么我们就需要把worksheet中的A1,B1,C1..
.的v
值改为我们想要的可以看到单元格在上面都是字母+数字来描述的,下面几个方法可以把这种字母+数字转化为数值
注意:excel中 列以 A开始,行以1开始,在
XLSX
中转化为数值后行与列都是0开始
encode_row / decode_row
转化行号
encode_col / decode_col
转化列号
encode_cell / decode_cell
转化单元格号
encode_range / decode_range
转化表格范围后面会举例说明
还有一些方法:
let wb_out = XLSX.write(workbook, opt) //将excel描述对象写入,返回指定的数据对象 然后通过let _blob = new Blob([wb_out],{type: 'application/octet-stream'})转为Blob对象 最后下载,用到了FileSaver,通过FileSaver下载导出 import FileSaver from 'file-saver' FileSaver.saveAs(_blob), '统计表.xlsx')
案例数据
//html
<table id="table">
<thead>
<tr>
<th>第一列A</th>
<th>第二列A</th>
<th>第三列A</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1A</td>
<td>1-2A</td>
<td>1-3A</td>
</tr>
<tr>
<td>2-1A</td>
<td>2-2A</td>
<td>2-3A</td>
</tr>
</tbody>
</table>
XLSX.utils.table_to_book()
通过把页面上已有的表格dom节点传入(也可以动态js生成),直接返回一个workbook对象
let wb = XLSX.utils.table_to_book(document.getElementById('table')); let wb_out = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'}) FileSaver.saveAs(new Blob([wb_out], {type: 'application/octet-stream'}), '统计表.xlsx');
XLSX.utils.table_to_sheet()
把页面上已有的表格dom节点传入(也可以动态js生成),直接返回一个worksheet对象
let ws = XLSX.utils.table_to_sheet(document.getElementById('table')) //创建一个workbook对象 let wb = XLSX.utils.book_new() //把worksheet对象添加进workbook对象,第三个参数是excel中sheet的名字 XLSX.utils.book_append_sheet(wb, ws, 'sheet1') //接下来就是写入,下载导出 let wb_out = XLSX.write(wb, {bookType: 'xlsx', type: 'array'}) FileSaver.saveAs(new Blob([wb_out], {type: 'application/octet-stream'}), '统计表.xlsx')
XLSX.utils.sheet_add_dom()
给worksheet对象追加一个表格dom
//得到一个worksheet对象
let ws = XLSX.utils.table_to_sheet(document.getElementById('table'))
//追加一个表格dom到 worksheet对象
//origin 默认值是从表格的最开始即A1开始追加,会覆盖前一个表格
//origin:-1 表示从上一个表格的末尾行追加
//origin: {c:4, r:0} cellAddress 会从这个单元格的位置开始追加
XLSX.utils.sheet_add_dom(ws, document.getElementById('另一个table'), {origin: {c: 4, r: 0}})
//接下来就跟上面步骤一样了
//创建一个workbook对象
let wb = XLSX.utils.book_new()
//把worksheet对象添加进workbook对象,第三个参数是excel中sheet的名字
XLSX.utils.book_append_sheet(wb, ws, 'sheet1')
//接下来就是写入,下载导出
let wb_out = XLSX.write(wb, {bookType: 'xlsx', type: 'array'})
FileSaver.saveAs(new Blob([wb_out], {type: 'application/octet-stream'}), '统计表.xlsx')
XLSX.utils.json_to_sheet(data)
通过json数据转成一个worksheet对象
let data = [
{
name: 'Eric',
age: '20',
hobby: 'ball',
sex: 'boy'
},
{
name: 'Lucy',
age: '22',
hobby: 'draw',
sex: 'girl'
},
{
name: 'Selina',
age: '27',
hobby: 'run',
sex: 'girl'
},
]
// 把json转为worksheet对象
let ws = XLSX.utils.json_to_sheet(data)
// 创建workbook对象
let wb = XLSX.utils.book_new()
// 添加worksheet 到 workbook
XLSX.utils.book_append_sheet(wb, ws, 'sheet')
// 写出 arraybuffer 数据
let wb_out = XLSX.write(wb, {bookType: 'xlsx', type: 'array'})
// 构建Blob对象
let _blob = new Blob([wb_out], {type: 'application/octet-stream'})
//下载
FileSaver(_blob, '统计表.xlsx')
XLSX.utils.aoa_to_sheet(data)
aoa_to_sheet
与json_to_sheet
用法差不多,aoa
即array of array
二维数组
excel中的单元格坐标(A1)转化为XLSX中的数值
console.log(XLSX.utils.encode_col(1)) // B console.log(XLSX.utils.decode_col('A')) // 0 console.log(XLSX.utils.encode_row(1)) // 2 console.log(XLSX.utils.decode_row('1')) // 0 console.log(XLSX.utils.encode_cell({c:0,r:0})) // A1 console.log(XLSX.utils.decode_cell('A2')) // {c: 0, r: 1} console.log(XLSX.utils.decode_range('A1:B2')) // {e: {c: 1, r: 1},s: {c: 0, r: 0}} console.log(XLSX.utils.encode_range({s: {c:0,r:0},e: {c:1,r: 1}})) //A1:B2
自定义表头
let source = [
{
name: 'Eric',
age: '20',
hobby: 'ball',
sex: 'boy',
eat: 'apple',
extra: '多余的'
},
{
name: 'Eric',
age: '20',
hobby: 'ball',
sex: 'boy',
eat: 'apple',
extra: '多余的'
},
{
name: 'Eric',
age: '20',
hobby: 'ball',
sex: 'boy',
eat: 'apple',
extra: '多余的'
},
]
// 需求:
// 原始数据比我们多一列 extra,我们需要剔除该列
// 原始数据的key会作为表头,我们需要转为中文
let field = ['name','age','hobby','sex','eat']
let label = {
name: '名字',
age: '年龄',
hobby: '爱好',
sex: '性别',
eat: '吃'
}
// 找到最后一列的编号(一共是5列,最后一列的编号是4,转换后是E)
let lastCol = XLSX.utils.encode_col(field.length - 1)
// 找到最后一行的编号(一共3行数据,还有表头占了一行,所以最后一行的编号是3,转换后是 4)
let lastRow = XLSX.utils.encode_row(source.length)
const ws = XLSX.utils.json_to_sheet(
source,
{
header: field //通过设置field可以把这个field排在前头,后续截取表格的时候,把尾部不需要的剔除
}
)
// 找出 这个表格的 单元格 范围
const range = XLSX.utils.decode_range(ws['!ref'])
// 重新设置 单元格范围,剔除不需要的(数据中的extra)列
ws['!ref'] = `A1:${lastCol}${lastRow}`
// 找到worksheet中 A1,B1,C1...等设置表头的字段,替换为上方label对应的数据
for (let c = range.s.c; c <= range.e.c; c++) {
const header = XLSX.utils.encode_col(c) + '1'
ws[header].v = label[ws[header].v]
}
// 最后 ws就是我们需要的worksheet