ReactExcel

Install

Using npm:

$ npm install --save  react-excel-jspreadsheet

or using yarn:

$ yarn add react-excel-jspreadsheet

功能介绍

类似Excel的React组件，基于jspreadsheet

import React from 'react'
import ReactExcel, { ReactExcelColumn } from 'react-excel-jspreadsheet'

const columns: ReactExcelColumn[] = [
  { type: 'text', title: 'Car', width: 120 },
  { type: 'dropdown', title: 'Make', width: 200, source: [ "Alfa Romeo", "Audi", "Bmw" ] },
  { type: 'calendar', title: 'Available', width: 200, options: { format:'YYYY/MM/DD' } },
  { type: 'image', title: 'Photo', width: 120 },
  { type: 'checkbox', title: 'Stock', width: 80 },
  { type: 'numeric', title: 'Price', width: 100, mask: '$ #.##,00', decimal: ',' },
  { type: 'color', width: 100, render: 'square' },
]

const data = [
  ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
  ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
]

const Base = () => {
  return (
    <ReactExcel data={data}
      columns={columns} />
  )
}

export default Base

API

| 参数 | 说明 | 类型 | 默认值值 | 说明 | | ------------- | -------------- | ------ | -------- | ---- | | data | 表格数据 | array | -- | 注意是二维数组 | | csv | 从此 URL 加载外部 CSV 文件 | string | -- | | | csvHeaders | 从 CSV 文件加载标题 | bool | -- | | | csvFileName | 下载方法的默认文件名 | string | -- | | | columns | 列配置，具体见column | array | -- | | | excelIns | 实例ref（需要执行实例方法，请先使用一个ref拿到实例） | MutableRefObject<any> | -- | | | columnResize | 列宽调整 | bool | true | | | colWidths | 列宽设置 | number[] | -- | | | colHeaders | 列标题 | string[] | -- | | | defaultColWidth | 新列的默认宽度 | 整数 | false | | | defaultColAlign | 新列的默认对齐方式 | [center, left, right] | false | | | allowInsertColumn | 允许插入列 | bool | true | | | allowDeleteColumn | 允许删除列 | bool | true | | | allowRenameColumn | 允许重命名列 | bool | true | | | minSpareCols | 最小备用列数 | [整数] | -- | | | minDimensions | 初始表格行列数 | [cols, rows] | -- | | | minSpareRows | 最小备用行数 | [整数] | -- | | | rows | 行配置 | Object({ height: 行高 }) | -- | | | rowResize | 行高调整 | bool | false | | | allowInsertRow | 允许插入行 | bool | true | | | allowDeleteRow | 允许删除行 | bool | true | | | tableOverflow | 超出展示滚动条 | bool | false | | | tableHeight | 强制表格的最大高度 | CSS String | -- | | | tableWidth | 强制表格的最大宽度 | CSS String | -- | | | allowExport | 允许导出 | bool | true | | | wordWrap | 允许换行 | bool | false | | | style | 表格初始化中的单元格样式 | Object | -- | | | fullscreen | 开启全屏 | bool | false | | | lazyLoading | 激活延迟加载 | bool | false | | | loadingSpin | 激活加载中图标 | bool | false | | | pagination | 分页 | 整数 | -- | | | paginationOptions | 每页记录数：例如 25,50,75,100 | [整数数组] | -- | | | search | 启用搜索 | bool | false | | | mergeCells | 合并单元格 | Record<string, number[]> | -- | 比如：{ A2: [2, 1] }表示从A列第2行开始，合并两列一行，B列就是Bx: [x, x]。注意：需要使用minDimensions强制设置最小表格行列数，不然表格不够使用时可能会报错 | | nestedHeaders | 嵌套表头 | array | -- | 参考示例：嵌套表头 | | onChange | 更改列值后事件 | func | -- | | | onSelection | 选中事件 | func | -- | | | onResizeColumn | 改变列宽 | func | -- | | | onResizeRow | 改变行高 | func | -- | | | onInsertRow | 插入行事件 | func | -- | | | onDeleteRow | 删除行事件 | func | -- | | | onInsertColumn | 插入列事件 | func | -- | | | onDeleteColumn | 删除列事件 | func | -- | | | onFocus | 获得焦点事件 | func | -- | | | onBlur | 失焦事件 | func | -- | |

column

| 参数 | 说明 | 类型 | 默认值值 | 说明 | | ------------- | -------------- | ------ | -------- | ---- | | type | 数据类型 | String：text | numeric | hidden | dropdown | autocomplete | checkbox | radio | calendar | image | color | html | -- | | | title | 列头显示文字 | String | -- | | | width | 列宽 | Number | -- | | | source | 下拉框的数据 | array | -- | | | options | 配置项，比如日期的格式配置 | Object | -- | |

实例方法

| 参数 | 说明 | 类型 | 说明 | | ------------- | -------------- | -------- | ---- | | getData | 获取完整或部分表格数据 | myExcel.getData([bool]) | @Param boolan onlyHighlighedCells - 仅获取高亮显示的单元格 | | setData | 设置表数据 | myExcel.setData([json]) | @Param json newData - 新的 json 数据，null 将重新加载内存中的内容 | | getJson | 获取 JSON 格式的全部或部分表格数据 | myExcel.getJson([bool]) | @Param boolan onlyHighlighedCells - 仅获取高亮显示的单元格 | | getRowData | 按数字从一行中获取数据 | myExcel.getRowData([int]) | @Param integer rowNumber - 行号 | | setRowData | 按数字设置一行数据 | myExcel.setRowData([int], [array]) | @Param integer rowNumber - 行号，@param array rowData - 行数据 | | getColumnData | 按数字从一列中获取数据 | myExcel.getColumnData([int]) | @Param integer columnNumber - 列号 | | setColumnData | 按数字设置一列数据 | myExcel.setColumnData([int], [array]) | @Param integer columnNumber - 列号，@param array colData - 列数据 | | setMerge | 合并单元格 | myExcel.setMerge([string], [int], [int]) | @Param string columnName - 列名，例如 A1。 @Param integer colspan - 列数 @Param integer rowspan - 行数 | | getMerge | 获取合并单元格属性 | myExcel.getMerge([string]) | @Param string columnName - 列名，例如 A1。| | removeMerge | 按列名销毁合并 | myExcel.removeMerge([string]) | @Param string columnName - 列名，例如 A1。| | destroyMerged | 销毁所有合并的单元格 | myExcel.destroyMerged() | | | getValueFromCoords | 从坐标中获取值 | myExcel.getValueFromCoords([x], [y]) | | | setValueFromCoords | 根据坐标设置值 | myExcel.setValueFromCoords([x], [y], [string], [bool]) | @Param string Value - 单元格的新值，@Param bool force - 更新只读列 | | getWidth | 获取当前列宽 | myExcel.getWidth([integer]) | @Param integer columnNumber - 从零开始的列号 | | setWidth | 更改列宽 | myExcel.setWidth([integer], [string]) | @Param integer columnNumber - 从零开始的列号，@Param string newColumnWidth - 新列宽 | | getHeight | 获取当前行高 | myExcel.getHeight([integer]) | @Param integer rowNumber - 从零开始的行号 | | setHeight | 更改行高 | myExcel.setHeight([integer], [string]) | @Param integer rowNumber - 从零开始的行号，@Param string newRowHeight- 新行高 | | getHeader | 通过列号获取当前标题 | myExcel.getHeader([integer]) | @Param integer columnNumber - 从零开始的列号 | | getHeaders | 获取所有标题标题 | myExcel.getHeaders() | | | setHeader | 按列更改标题 | myExcel.setHeader([integer], [string]) | @Param integer columnNumber - 从零开始的列号，@Param string columnTitle - 新标题标题 | | getConfig | 获取表定义 | myExcel.getConfig() | | | insertColumn | 添加一个新列 | myExcel.insertColumn([mixed], [integer], [boolean], [object]) | @param mixed - 要添加的列数或要在单个列中添加的数据，@param int columnNumber - 要创建的列数，@param boolean insertBefore，@param object properties - 列属性 | | deleteColumn | 按数字删除列 | myExcel.deleteColumn([integer], [integer]) | @Param integer columnNumber - 从零开始应该排除哪一列，@param integer numOfColumns - 要从参考列中排除的列数 | | moveColumn | 改变列位置 | myExcel.moveColumn([integer], [integer]) | @Param integer columnPosition - 原始位置，@Param integer newColumnPosition - 新位置 | | insertRow | 添加新行 | myExcel.insertRow([mixed], [integer], [boolean]) | @Param mixed - 要插入的空白行数或带有新行数据的单个数组，@Param integer rowNumber - 引用行号，@param boolean insertBefore | | deleteRow | 按数字删除行 | myExcel.deleteRow([integer], [integer]) | @Param integer rowNumber - 从零开始应该排除哪一行，@Param integer numOfRows - 要排除的行数 | | moveRow | 改变行位置 | myExcel.moveRow([integer], [integer]) | @Param integer rowPosition - 原始位置，@Param integer newRowPosition - 新位置 | | download | 以 CSV 文件的形式获取当前数据 | myExcel.download([bool]) | @Param bool - true 下载解析的公式。 | | fullscreen | 切换表格全屏模式 | myExcel.fullscreen([bool]) | @Param boolan fullscreen - 将全屏状态定义为 true 或 false | | search | 在表中搜索，启用搜索功能才有效。 | myExcel.search([string]) | @Param string - 搜索关键字 | | resetSearch | 重置搜索 | myExcel.resetSearch() | | | whichPage | 展示的页，仅在开启分页时有效 | myExcel.whichPage() | | | page | 转到页码，仅在开启分页时有效 | myExcel.page([integer]) | | | undo | 撤销 | myExcel.undo() | | | redo | 重做 | myExcel.redo() | |