x-spreadsheet（Star 9.8k）

github：https://github.com/myliang/x-spreadsheet
X-Spreadsheet中文文档
轻量级，基于 JavaScript 快速构建 web excel，数据驱动的基于 Web 的 Excel 库，基于 canvas 的电子表格库。

效果

image.png

使用

  1. npm install x-data-spreadsheet

react代码

  1. import React, { useRef, useEffect } from 'react';
  2. import Spreadsheet from "x-data-spreadsheet";
  3. import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
  4. Spreadsheet.locale('zh-cn', zhCN); // 设置中文
  6. const options = {
  7.   mode: 'edit', // edit | read
  8.   showToolbar: true,
  9.   showGrid: true,
  10.   showContextmenu: true,
  11.   view: {
  12.     // width: () => 1200,
  13.     // height: () => 600,
  14.     height: () => document.documentElement.clientHeight, // 必须是一个function
  15.     width: () => document.documentElement.clientWidth,
  16.   },
  17.   row: {
  18.     len: 100,
  19.     height: 25,
  20.   },
  21.   col: {
  22.     len: 26,
  23.     width: 100,
  24.     indexWidth: 60,
  25.     minWidth: 60,
  26.   },
  27.   style: {
  28.     bgcolor: '#ffffff',
  29.     align: 'left',
  30.     valign: 'middle',
  31.     textwrap: false,
  32.     strike: false,
  33.     underline: false,
  34.     color: '#0a0a0a',
  35.     font: {
  36.       name: 'Helvetica',
  37.       size: 10,
  38.       bold: false,
  39.       italic: false,
  40.     },
  41.   },
  42. }
  44. const webExcel = () => {
  45.   const spreadsheetRef = useRef();
  46.   useEffect(() => {
  47.     // If you need to override the default options, you can set the override
  48.     // new Spreadsheet('#x-spreadsheet-demo'); // 没有option会使用默认配置
  49.     // const s = new Spreadsheet('#x-spreadsheet-demo', options) // 使用元素id 
  50.     const s = new Spreadsheet(spreadsheetRef.current, options)
  51.       .loadData({}) // load data
  52.       .change(data => {
  53.         // save data to db
  54.       });
  55.     // data validation
  56.     s.validate();
  57.   }, []);
  58.   return (
  59.     <div id="x-spreadsheet-demo" ref={spreadsheetRef}></div>
  60.   );
  61. };
  63. export default webExcel;

jexcel（Star 4.9k）

https://github.com/paulhodel/jexcel

一个轻量级、功能强大的电子表格库。轻松实现复杂数据的表格管理，支持 JS 数组、JSON、CSV 等数据，并且可以实现 excel 文件的直接复制和粘贴。

效果

jexcel、x-spreadsheet（表格管理） - 图2

使用

  1. var data = [
  2.   ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
  3.   ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
  4. ];
  5. jexcel(document.getElementById('spreadsheet'), {
  6.   data:data,
  7.   columns: [
  8.     { type: 'text', title:'Car', width:120 },
  9.     { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
  10.     { type: 'calendar', title:'Available', width:200 },
  11.     { type: 'image', title:'Photo', width:120 },
  12.     { type: 'checkbox', title:'Stock', width:80 },
  13.     { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
  14.     { type: 'color', width:100, render:'square', }
  15.   ]
  16. });