[Open Source] Build Web Excel Quickly with JavaScript: Minimalist, Efficient, and Easy to Configure

Open SourceClassification Systems

2026-06-28 08:54 12 次浏览 • 0 次下载 0KB

1. Project Overview

Build Web Excel Quickly with JavaScript

Minimalist, Efficient, and Easy to Configure

This is a lightweight Excel development library built with Web (ES6) and Canvas.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Lightweight

Full Features, Including All Plugins. The bundled code is less than 200 KB.

Easy to Use

If you only need basic functionality, you can use it with zero configuration.

Data-Driven

Data Manipulation Is Simple and Fast

Core Features

The Following Features Are Supported

Undo and Redo
Add Rows and Columns
Delete Rows and Columns
Hide Rows and Columns
Dynamically Resize Rows and Columns
Freeze Rows and Columns
Add Borders / Colors / Border Line Styles
Cell Merging
Copy
Paste
Print
Formulas
Filtering
Auto Fill
Multiple Sheet Support
Font Styles
Custom Fonts / Sizes / Colors
Foreground and Background Fill Colors
Format Validation
Text Alignment
Text Wrapping

5. Tech Stack

Quick Development Guide

CDN

You can directly include it in a static HTML file.

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>

<script>
  x_spreadsheet('#xspreadsheet');
</script>

NPM

You can install it as an npm package.

# Build Based on Your Project
  npm install x-data-spreadsheet

In HTML

<div id="x-spreadsheet-demo"></div>

In JavaScript

import Spreadsheet from "x-data-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#x-spreadsheet-demo', options);
const s = new Spreadsheet("#x-spreadsheet-demo")
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });

// data validation
s.validate()

Default Configuration

{
  mode: 'edit', // edit | read
  showToolbar: true,
  showGrid: true,
  showContextmenu: true,
  view: {
    height: () => document.documentElement.clientHeight,
    width: () => document.documentElement.clientWidth,
  },
  row: {
    len: 100,
    height: 25,
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    strike: false,
    underline: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false,
    },
  },
}

Import and Export

For information on how to export, please refer to the relevant documentation. If you need custom export functionality, you can use SheetJs to handle the export. Thanks again.

Event Binding

Simple Event Binding

const s = new Spreadsheet("#x-spreadsheet-demo")
 // event of click on cell
 s.on('cell-selected', (cell, ri, ci) => {});
 s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
 // edited on cell
 s.on('cell-edited', (text, ri, ci) => {});

Quickly Set Cell Values

Use instance.cellText(ri,ci,text) to set a value, then call reRender() to refresh. You will see the data changes.

const s = new Spreadsheet("#x-spreadsheet-demo")
  s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();

Get the Styles and Values of Cells in the Selected Table

const s = new Spreadsheet("#x-spreadsheet-demo")
// cell(ri, ci, sheetIndex = 0)
s.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
s.cellStyle(ri, ci);

Quick Localization

If importing in JavaScript

If you encounter any further issues, please refer to issue #281.

// npm
  import Spreadsheet from 'x-data-spreadsheet';
  import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';

  Spreadsheet.locale('zh-cn', zhCN);
  new Spreadsheet(document.getElementById('xss-demo'))

You can use a CDN.

<!-- Import via CDN -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/locale/zh-cn.js"></script>

<script>
  x_spreadsheet.locale('zh-cn');
</script>

Join the Developers

# Clone <repo>
  Visit Yifei Open Source: https://code.exmay.com/ Download
  # Enter the Project Development Directory
  cd x-spreadsheet
  # Install Dependencies
  npm install
  # just do it
  npm run dev

Browser support

chrome, firefox, Safari

下载地址免费

资源直链https://github.com/myliang/x-spreadsheet

去下载