一款React版本的excel插件(react-jexcel)

一款React版本的excel插件(react-jexcel)

喜剧之王爱创作关注

0.6862021.10.27 19:25:43字数 467阅读 1,589

背景介绍

在日常开发中，会遇到一些web端Excel报表的需求，或者，日常的一些Table组件，从灵活性或性能上不能满足需求，这就需要一款轻量级的Excel组件，本组件在我闲暇之余完成，后续还会不断的完善和补充。

环境

• react >=16.8

地址

github: https://github.com/sorryljt/react-jexcel
npm: https://www.npmjs.com/package/react-jexcel

简介

基于jspreadsheet v4版本，封装的React 版本的轻量级Excel插件，开箱即用，配置简单，极大的方便了React开发着对于excel或者报表的使用需求，本插件将提供完善的demo和中文文档...

文档和demo将不断完善，欢迎大家PR👏

快速开始

安装

yarn add React-Jexcel
// or
npm instll React-Jexcel

在项目中使用

import React, { useRef } from 'react';
import { ReactJexcel } from 'react-jexcel';

export default () => {
  const ref = useRef(null)
  const addRow = () => {
    ref.current.jexcel.insertRow()
  }
  const data = [
    ['Mazda', 2001, 2000],
    ['Pegeout', 2010, 5000],
    ['Honda Fit', 2009, 3000],
    ['Honda CRV', 2010, 6000],
];
  return (
    <>
      <ReactJexcel
        data={data}
        rowResize={true}
        ref={ref}
      />
      <div>
        <button onClick={addRow}>addRow</button>
      </div>
    </>
  )
};

效果截图

 

image

属性(Props)

属性名	含义	类型
data	表格数据	Array,eg:[[1,2,3,4]]
columns	列信息	见下方列信息
rowResize	是否可调整行高	boolean
rows	初始列信息	objecteg:{3: {height: '300px'}},代表第3列300px高
minDimensions	表格最小尺寸	[cols, rows]
allowExport	是否允许导出	boolean,为true时，ctrl +s可导出
columnDrag	是否允许列拖动	boolean,为true时，可拖动列头交换列顺序
其他属性	待完善中文文档	可参照原本英文文档属性props

方法(methods)

本组件支持ref直接调用其方法，全部方法待完善中文文档，如需，可自行到官网查找，直接调用即可

方法名	作用	备注
insertRow	新增一行	myTable.insertRow([mixed], [integer], [boolean]);
deleteRow	删除一行	myTable.deleteRow([integer], [integer]);
getData	获取表格数据	myTable.getData([bool]);