Pikaz Excel Js Save

一个纯js版本的excel导入导出插件

Project README

介绍

导入导出excel的js插件,在xlsx和xlsx-style的基础上做了简单的封装,开箱即用。

特性

  • 支持导出excel文件,并可设置列宽,边框,字体,字体颜色,字号,对齐方式,背景色等样式。
  • 支持excel文件导入,生成json数据,考虑到客户端机器性能,导入大量数据时,推荐拆分数据分成多个文件导入。

版本更新

本插件库已更新至1.x版本,历史版本0.2.x文档请看这里

  • 新版本改为纯js库,支持多种框架如vue2, vue3, react及无其他依赖的html中使用
  • 合并项与单元格格式中的单元格名称,现在支持传入数字,而非只能使用excel单元格名称,如第一行第三列,可使用A3或3-1

demo示例点击这里体验

demo代码点击这里一键copy

安装

使用npm或yarn

yarn add pikaz-excel-js

npm i -S pikaz-excel-js
import {
    excelExport,
    excelImport
} from '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>
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) -- --
Open Source Agenda is not affiliated with "Pikaz Excel Js" Project. README Source: pikaz-18/pikaz-excel-js

Open Source Agenda Badge

Open Source Agenda Rating