js-xlsx
前端Excel操作
介绍
(因为excel有点长 这里我将用ex替代)
有时候我们会在前端进行一些数据的操作,可能是解析ex的数据,或者是将数据导出为ex文档。在前端解析ex其实还是挺方便的,任意结构的对象都可以使用。今天我遇到了一个难题所以我翻阅了很多文章,但大多都千篇一律的,并没有什么营养价值,也无法解决我的需求。所以我结合了之前项目中使用过的js-xlsx进行对ex简单得操作。js-xlsx 提供的接口非常清晰主要分为两类、
xlsx
对象本身提供的功能
- 解析数据
utils
工具类
- 将数据添加到数据表对象上
- 将二维数组以及符合格式的对象或者HTML转为工作表对象
- 将工作簿转为另外一种数据格式
- 行,列,范围之间的转码和解码
- 工作簿操作
- 单元格操作
常用API
解析
名称 | 作用 | 示例 |
---|---|---|
read(data, {type: options}) | 读取一个excel文件并返回book对象 | XLSX.read(data, {type: options}); |
book_new() | 创建一个book对象 | const wb= utils.book_new(); |
sheet_to_json(Sheet) | 将一个sheet对象转为JSON 对象 | const sheetObj = utils.sheet_to_json(wb.Sheets[sheetName]); |
json_to_sheet(data) | 将一个JSON 对象数组转为sheet对象 | const sheet = utils.json_to_sheet(this.studentList); |
aoa_to_sheet(data) | 将一个数组对象转为sheet对象 | const sheet = utils.aoa_to_sheet(this.studentList); |
book_append_sheet(workbook, sheet, “sheet名称”) | 将sheet对象添加到book中 | utils.book_append_sheet(wb, sheet, "sheetName"); |
引入资源
# 可以通过npm进行引入
npm install xlsx -s
# cdn引入的话就自己去找吧
# 这里我是在组件中引用
import xlsx from "xlsx"; // 在页面中引入
import {read, writeFile, utils} from "xlsx"; // 在页面中 按序引入
# 全局引用可以在main.js中配置
import * as XLSX from "xlsx";
Vue.prototype.$xlsx = XLSX;
# 按需引入
import {read, writeFile, utils} from "xlsx";
Vue.prototype.$xlsxRead = read;
Vue.prototype.$xlsxWriteFile = writeFile;
Vue.prototype.$xlsxUtils = utils;
简单使用
通过 读写 来举例使用
读取xlsx文件
<template>
<div>
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :limit="1" :http-request="eradXlsx">
<el-button type="primary">将文件拖到此处,或<em>点击上传</em></el-button>
</el-upload>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: 'Demo',
data() {
return {};
},
methods: {
eradXlsx(params) {
// 获取选中的文件
const file = params.file;
// 创建文件读取对象 用于读取file 和 blob
const fileReader = new FileReader();
// 读取文件到二进制 异步读取 配合 readAsBinaryString(file) 函数一起使用
fileReader.onload = (event) => {
console.log(event);
// 得到二进制的result
const { result } = event.target;
console.log(result);
// 通过$xlsxUtils 解析二进制流获得workbook对象
const wb = this.$xlsx.read(result, {type: "binary"});
console.log(wb);
// 遍历sheet
for (let sheetName in wb.Sheets) {
// 虽然wb.Sheets中可以看出sheet都是一个对象 但是此处遍历只会得到sheetName
console.log(sheetName);
// 通过sheetName获取真正的sheet对象
console.log(wb.Sheets[sheetName]);
// 通过xlsxUtils.sheet_to_json() 转换成对象
const sheetObj = this.$xlsx.utils.sheet_to_json(wb.Sheets[sheetName]);
// 下面就是对象操作 根据实际情况自定
}
}
// 以二进制方式打开文件
fileReader.readAsBinaryString(file);
// 阻止上传
return false;
}
}
}
</script>
写存xlsx文件
<template>
<div>
<el-button type="primary" @click="exportExcel">导出三年(2)班学生信息</em></el-button>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: 'Demo',
data() {
return {
studentList: [
{name: '小明', age: 9, sex: '男'},
{name: '小红', age: 8, sex: '女'},
{name: '小智', age: 9, sex: '男'},
{name: '小秀', age: 8, sex: '女'},
{name: '小林', age: 9, sex: '女'},
{name: '小欧', age: 8, sex: '男'},
{name: '小晨', age: 9, sex: '男'}
]
};
},
methods: {
exportExcel() {
// 创建一个book对象
const wb = this.$xlsx.utils.book_new();
// 将学生数组对象转为sheet表
const sheet = this.$xlsx.utils.json_to_sheet(this.studentList);
// aoa_to_sheet 是将数组转为sheet
// const sheet = this.$xlsx.utils.aoa_to_sheet(this.studentList);
// 将sheet 添加到book中
this.$xlsx.utils.book_append_sheet(wb, sheet, "sheetName");
// 导出
writeFile(wb, `文件名称.xlsx`);
}
}
}
</script>
深入了解WorkBook
对象和Sheet
对象
WorkBook
对象结构
在前面我们已经了解过 通过
xlsx.read(data, { type: option });
得到一个workbook对象
这里option 的类型有以下几个:
base64
: 以base64
方式读取binary
:BinaryString
格式(byte n is data.charCodeAt(n))
string
:UTF8
编码的字符串buffer
:nodejs Buffer
array
:Uint8Array
,8位无符号数组file
: 文件的路径(仅nodejs
下支持)通过read()函数读取到的workbook对象他的结构
其中主要看
Props、SheetNames、Sheets
这三个属性
Props
:存储文档的基本信息,例如文件作者、文件创建时间、最后修改时间、最后修改作者等等信息SheetNames
:存储工作簿中所有工作表的名称,为数组形式Sheets
:存储工作簿中所有工作表的详细数据
Sheet 对象结构
Sheets
保存了每个sheet的具体内容(我们称之为Sheet Object
)。每一个sheet
是通过类似A1
这样的键值保存每个单元格的内容,我们称之为单元格对象(Cell Object
)每一个
Sheet Object
表示一张表格,只要不是!
开头的都表示普通cell
Cell 对象结构
每一个单元格都是一个对象(
Cell Object
),它主要有t
、v
、r
、h
、w
等字段(详见这里)
- t:表示内容类型
s
表示string类型n
表示number类型b
表示boolean类型d
表示date类型- …
- v:表示原始值
- f:表示公式,如
B2+B3
- h:HTML内容
- w:格式化后的内容
- r:富文本内容
rich text
操作合并单元格
<template> <div> <el-button type="primary" @click="exportExcel">导出三年(2)班学生信息</el-button> </div> </template> <script> export default { name: 'Demo', data() { return { studentList2: [ ["三年二班学生信息"], ["姓名", "年龄", "性别"], ["小明", 9, "男"], ["小红", 8, "男"], ["小智", 9, "男"], ["小秀", 9, "女"], ["小林", 8, "性别"], ["小晨", 9, "女"] ] }; }, methods: { exportExcel() { // 创建一个book对象 const wb = this.$xlsx.utils.book_new(); console.log("workbook:", wb); // 将学生数组对象转为sheet表 // aoa_to_sheet 是将数组转为sheet const sheet = this.$xlsx.utils.aoa_to_sheet(this.studentList2); console.log("sheet", sheet); // 设置合并单元格区间 sheet["!merges"] = [ {s:{r: 0, c: 0}, e:{r: 0, c: 2}} // 合并A1:C1 ] // 将sheet 添加到book中 this.$xlsx.utils.book_append_sheet(wb, sheet, "sheetName"); // 导出 writeFile(wb, `三年二班学生信息.xlsx`); } } } </script>
引用:https://www.cnblogs.com/liuxianan/p/js-excel.html