pikaz-excel-js
pikaz-excel-js copied to clipboard
Published
20 hours ago •
pikaz-18
pikaz-18
一个纯js版本的excel导入导出插件
本插件库已更新至1.x版本，历史版本0.2.x文档请看这里
版本更新
- 新版本改为纯js库，支持多种框架如vue2,vue3,react及无其他依赖的html中使用
- 合并项与单元格格式中的单元格名称，现在支持传入数字，而非只能使用excel单元格名称，如第一行第三列，可使用A3或3-1
介绍
导入导出excel的js插件，在xlsx和xlsx-style的基础上做了简单的封装，开箱即用。
特性
- 支持导出excel文件，并可设置列宽，边框，字体，字体颜色，字号，对齐方式，背景色等样式。
- 支持excel文件导入，生成json数据，考虑到客户端机器性能，导入大量数据时，推荐拆分数据分成多个文件导入。
demo
demo代码
安装
使用npm或yarn
yarn add pikaz-excel-js
npm i -S pikaz-excel-js
使用cdn引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pikaz-excel-js"></script>
或者
<script type="text/javascript" src="https://unpkg.com/pikaz-excel-js"></script>
导入
import {
excelExport
} from 'pikaz-excel-js'
excelExport({
sheet: [{
title: "水果的味道",
tHeader: [
["荔枝", "柠檬"]
],
table: [{
litchi: "甜",
lemon: "酸"
}],
keys: ["litchi", "lemon"],
sheetName: "水果的味道"
}]
})
函数参数:
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| bookType | 文件格式 | string | xlsx | xlsx |
| filename | 文件名称 | string | -- | excel |
| sheet | 表格数据，每个表格数据对象配置具体看下方表格配置 | object[] | -- | -- |
| beforeStart | 处理数据之前的钩子，参数为导出的文件格式，文件名，表格数据，若抛出Error则停止导出 | function(bookType, filename, sheet) | -- | -- |
| beforeExport | 导出文件之前的钩子，参数为blob文件流，文件格式，文件名，若抛出Error则停止导出 | function(blob, bookType, filename) | -- | -- |
| onError | 导出失败的钩子，参数为错误信息 | function(err) | -- | -- |
表格参数配置
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 表格标题，自动设置合并，非必须项 | string | -- | -- |
| tHeader | 表头, 非必须项 | string[] | -- | -- |
| table | 表格数据，如果无数据，设置为空字符""，避免使用null或undefined | object[] | -- | -- |
| merges | 合并两个单元格之间所有的单位格，支持excel行列格式或数字格式（如合并第一排第一列至第一排第三列为'A1: A3'或'1-1:3-1'），合并的表格单元多余数据项以空字符串填充，非必须项 | string[] | -- | -- |
| keys | 数据键名，需与表头内容顺序对应 | string[] | -- | -- |
| colWidth | 列宽，若不传，则列宽自适应（自动列宽时数据类型必须为string，如有其他数据类型，请手动设置列宽） | number[] | -- | -- |
| sheetName | 表格名称 | string | -- | sheet |
| globalStyle | 表格全局样式，具体参数查看下方表格全局样式 | object | -- | 表格全局样式 |
| cellStyle | 单元格样式，每个单元格对象配置具体参数查看下方单元格样式 | object[] | -- | -- |
表格全局样式
| 参数 | 属性名 | 说明 | 类型 | 可选值 | 默认值 |
| border | top | 格式如：{style:'thin',color:{ rgb: "000000" }} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} |
| right | 格式如：{style:'thin',color:{ rgb: "000000" }} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} | |
| bottom | 格式如：{style:'thin',color:{ rgb: "000000" }} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} | |
| left | 格式如：{style:'thin',color:{ rgb: "000000" }} | object | style:thin/medium/dotted/dashed | {style:'thin',color:{ rgb: "000000" }} | |
| font | name | 字体 | string | 宋体/黑体/Tahoma等 | 宋体 |
| sz | 字号 | number | -- | 12 | |
| color | 字体颜色,格式如：{ rgb: "000000" } | object | -- | { rgb: "000000" } | |
| bold | 是否为粗体 | boolean | true/false | false | |
| italic | 是否为斜体 | boolean | true/false | false | |
| underline | 是否有下划线 | boolean | true/false | false | |
| shadow | 是否有阴影 | boolean | true/false | false | |
| fill | fgColor | 背景色 | { rgb: "ffffff" } | -- | { rgb: "ffffff" } |
| alignment | horizontal | 水平对齐方式 | string | left/center/right | center |
| vertical | 垂直对齐方式 | string | bottom/center/top | center | |
| wrapText | 文字是否换行 | boolean | true/false | false |
单元格样式
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| cell | 单元格名称，支持excel单元格名称与数字行列格式，如'A3'或'3-1' | string | -- | -- |
其他属性与表格全局样式设置方式一致
导出
import {
excelImport
} from 'pikaz-excel-js'
excelImport().then(res => {
console.log(res)
})
函数参数:
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| file | 导入的文件，若不传，则自动调起上传功能 | file | -- | null |
| sheetNames | 需要导入表的表名，如['插件信息']，若不传则读取excel中所有表格，非必传 | string[] | -- | -- |
| removeBlankspace | 是否移除数据中字符串的空格 | Boolean | true/false | false |
| removeSpecialchar | 是否移除不同版本及环境下excel数据中出现的特殊不可见字符，如u202D等, 使用此功能，返回的数据将被转化为字符串 | Boolean | true/false | true |
| beforeImport | 文件导入前的钩子，参数file为导入文件 | function(file) | -- | -- |
| onProgress | 文件导入时的钩子 | function(event, file) | -- | -- |
| onChange | 文件状态改变时的钩子，导入文件、导入成功和导入失败时都会被调用 | function(file) | -- | -- |
| onSuccess | 文件导入成功的钩子，参数response为生成的json数据 | function(response, file) | -- | -- |
| onError | 文件导入失败的钩子，参数error为错误信息 | function(error) | -- | -- |
pikaz-18