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

workbook: 可以理解为XLSXexcel文件描述的一个对象,可通过 XLSX.utils.book_new()来创建,该方法返回workbook对象

worksheet:可以理解为XLSXexcelsheet的描述的一个对象,可通过 XLSX.utils.aoa_to_sheetXLSX.utils.json_to_sheetXLSX.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...就是每个单元格的描述 ttype,表示类型,即s就是string型。vvalue,表示值,每个单元格的数据。我们可以通过设置这个!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_sheetjson_to_sheet用法差不多,aoaarray 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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容