- Notifications
You must be signed in to change notification settings - Fork98
一个纯js版本的excel导入导出插件
NotificationsYou must be signed in to change notification settings
pikaz-18/pikaz-excel-js
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
导入导出 excel 的 js 插件,在 xlsx 和 xlsx-style 的基础上做了简单的封装,开箱即用。
- 支持导出 excel 文件,并可设置列宽,边框,字体,字体颜色,字号,对齐方式,背景色等样式。
- 支持 excel 文件导入,生成 json 数据,考虑到客户端机器性能,导入大量数据时,推荐拆分数据分成多个文件导入。
本插件库已更新至 1.x 版本,历史版本 0.2.x 文档请看这里
- 新版本改为纯 js 库,支持多种框架如 vue2, vue3, react 及无其他依赖的 html 中使用
- 合并项与单元格格式中的单元格名称,现在支持传入数字,而非只能使用 excel 单元格名称,如第一行第三列,可使用 A3 或 3-1
- 新增 esmodule 模块化,支持 vite 等使用
yarn add pikaz-excel-jsnpm i -S pikaz-excel-js
import{excelExport,excelImport}from"pikaz-excel-js";
<scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/pikaz-excel-js"></script>或者<scripttype="text/javascript"src="https://unpkg.com/pikaz-excel-js"></script>
const{ excelExport, excelImport}=window.pikazExcelJs;
import{excelExport}from"pikaz-excel-js";excelExport({sheet:[{// 表格标题title:"水果的味道1",// 表头tHeader:["种类","味道"],// 数据键名keys:["name","taste"],// 表格数据table:[{name:"荔枝",taste:"甜",},{name:"菠萝蜜",taste:"甜",},],sheetName:"水果的味道1",},],});
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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) | -- | -- |
About
一个纯js版本的excel导入导出插件
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.