使用SheetJS导出 Excel 表格

Write and share what I see and hear

最近遇到一个很好用的前端导出Excel 表格的工具 – SheetJS
官方地址
github地址

官方提供了多种版本，自己做点小demo可以使用社区免费版本

使用方法

具体使用方法在官方文档中有很详细的说明，这里举个例子

安装

npm install xlsx

引入

import xlsx from 'xlsx'

使用

// 1. 创建一个工作簿 workbookconst workBook = xlsx.utils.book_new()// 2. 创建工作表 worksheetconst workSheet = xlsx.utils.json_to_sheet([{id: 1, name: '张三', age: 16},{id: 2, name: '李四', age: 18},{id: 3, name: '王五', age: 20}
])// 3. 将工作表放入工作簿中xlsx.utils.book_append_sheet(workBook, workSheet)// 4. 生成数据保存xlsx.writeFile(workBook, `测试.xlsx`, {bookType: 'xlsx'})

通过以上步骤，即可得到一个excel表格

优化

修改表头

定义表头对应的字段

const header = {id: '编号', name: '姓名', age: '年龄'
}

处理数据

list = list.map(item => {const obj = {}for (const key in item) {if (header[key]) {obj[header[key]] = item[key]} else {obj[key] = item[key]}}return obj
})

对比上面的使用方法将数据放入工作表

// 2. 创建工作表 worksheet
const workSheet = xlsx.utils.json_to_sheet(list)

通过以上操作，即可得到一个拥有直观表头的excel表格

复用

上面的方法每次使用都需要重新手动引入js，还需要再写一遍使用过程，稍微有些麻烦，下面封装一个可直接复用的方法

js用法

import xlsx from 'xlsx'export const jsonToExcel = (options: {list, header, fileName, bookType,
}) => {if (options.header) {options.list = options.list.map(item => {const obj = {}for (const key in item) {if (options.header[key]) {obj[options.header[key]] = item[key]} else {obj[key] = item[key]}}return obj})}// 1. 创建一个工作簿 workbookconst workBook = xlsx.utils.book_new()// 2. 创建工作表 worksheetconst workSheet = xlsx.utils.json_to_sheet(options.list)// 3. 将工作表放入工作簿中xlsx.utils.book_append_sheet(workBook, workSheet)// 4. 生成数据保存xlsx.writeFile(workBook, options.fileName || `测试.${new Date().valueOf()}.xlsx`, {bookType: options.bookType || 'xlsx'})
}

下面是结合了ts的写法（添加了类型验证）

import xlsx from 'xlsx'export const jsonToExcel = (options: {list: any[],header: Record<string, string>,fileName?: string,bookType?: xlsx.BookType | undefined,
}) => {if (options.header) {options.list = options.list.map(item => {const obj: Record<string, any> = {}for (const key in item) {if (options.header[key]) {obj[options.header[key]] = item[key]} else {obj[key] = item[key]}}return obj})}// 1. 创建一个工作簿 workbookconst workBook = xlsx.utils.book_new()// 2. 创建工作表 worksheetconst workSheet = xlsx.utils.json_to_sheet(options.list)// 3. 将工作表放入工作簿中xlsx.utils.book_append_sheet(workBook, workSheet)// 4. 生成数据保存xlsx.writeFile(workBook, options.fileName || `测试.${new Date().valueOf()}.xlsx`, {bookType: options.bookType || 'xlsx'})
}

将上面的方法单独放入文件中，使用时，只需要引入jsonToExcel方法，并传入对应的参数就可以了

前端知识分享——SheetJS 用法体验相关推荐

css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
前端知识分享总结（实时更新......)
RESTful API REST 知识点:前端 - SegmentFault 思否 1.$(document).ready 与 window.onload 的区别 $(document).ready ...
HTML5前端知识分享：Vue入门
Vue 是渐进式框架,自底向上增量开发,是构建数据驱动的web界面,他通过尽可能简单的API实现响应的数据绑定和组合的视图组件,与angularjs,相比它小巧,运行快数据绑定都使用{{}} ,与re ...
现代软件工程_团队项目_阿尔法阶段_前端知识共享_2017.11.21
现代软件工程_团队项目_阿尔法阶段_前端知识分享更加舒适浏览格式 http://blog.csdn.net/bowean HTML基础(一) 本文参考了[http://www.w3school.co ...
好程序员分享Web前端知识之HTML
今天好程序员分享Web前端知识之HTML.Web前端技术由HTML.CSS和Javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者 ...
陨石VR体验馆落户北京碧鬼REAL论坛带来真知识分享
VR行业在今年可谓是处于风口浪尖,新品扎堆儿让人应接不暇,纵观市面上的VR产品,无论是从配置.使用方式.价格.体验等方面都有着相当大的不同.虽然市面上的VR产品相当丰富,但对于大部分消费者来说,都很难 ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
知识分享之Golang——函数的基本用法
知识分享之Golang--函数的基本用法背景知识分享之Golang篇是我在日常使用Golang时学习到的各种各样的知识的记录,将其整理出来以文章的形式分享给大家,来进行共同学习.欢迎大家进行持续关 ...
2017年3月份前端资源分享
平日学习接触过的网站积累,以每月的形式发布.2017年以前看这个网址:http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 1754535 ...

前端知识分享——SheetJS 用法体验

使用SheetJS导出 Excel 表格

使用SheetJS导出 Excel 表格

使用方法

安装

引入

使用

优化

修改表头

复用

前端知识分享——SheetJS 用法体验相关推荐

最新文章

热门文章