js xlsx使用说明（主要讲导出表格与设置表头相关）

#js xlsx使用说明（主要讲导出表格与设置表头相关）| 来源: 网络整理| 查看: 265

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

打印worksheet对象，可以看到描述的相关信息例如

{ !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 第一列A 第二列A 第三列A 1-1A 1-2A 1-3A 2-1A 2-2A 2-3A 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

【本文地址】

公司简介

联系我们