Free and Open Source High-Performance JavaScript Spreadsheet: X-Sheet Tutorial

Background

With the development of Internet technology, especially web applications, our demand for online documents and light applications is getting higher and higher. Many small partners have become accustomed to cloud office and online collaborative office. Commonly used are Google Sheet,Tencent documents, Kingsoft documents, and shimo documents, Lark, etc.,Recently, I discovered a high-performance front-end javascript spreadsheet: x-sheet. It was inspired by Google Sheet and rendered using HTML5 canvas. Next, I will share the introductory experience.

Introduction

First put the official open source address of x-sheet

https://gitee.com/eigi/x-sheet

https://github.com/eiji-th/x-sheet

Online experience address:

https://lwebapp.com/example/x-sheet.html

You can pull up the latest code from gitee to look at it locally. This is a standard es6 modernization project, custom webpack packaging, and code analysis after running, and there are several cases for reference.

Feature List

Let’s take a look at the function description on the README

  • undo & redo
  • Format brush
  • Clear format
  • Text format
  • Font settings
  • Font size
  • Bold font
  • Italics
  • Underscore
  • Strikethrough
  • Text color
  • Cell color
  • Cell border
  • Font slanted
  • Slanted bezel
  • Background tilt
  • Merge Cells
  • Horizontal alignment
  • Word wrap
  • Freeze cells
  • Cell function (processing)
  • Row height and column width settings
  • Copy, cut, paste (processing)
  • Auto fill
  • Insert row, column (processing)
  • Delete rows and columns (processing)
  • Hidden rows and columns (processing)
  • Support multiple sheets
  • Print (Processing)
  • Data verification (in process)
  • Export XLSX
  • Import XLSX (Processing)
  • Export CVS (Processing)
  • Import CVS (Processing)
  • Import pictures (Processing)
  • Data screening (under processing)

Usage

So how to start an x-sheet demo? Since x-sheet is still in the development stage, the npm package installation method is not yet provided, we can package and use it from the source code.

  1. Clone the code
git clone https://gitee.com/eigi/x-sheet.git
  1. Enter the code directory, install dependencies
cd x-sheet
npm i
  1. Packaging
npm run build
  1. After packaging, we can create a new html file and import the packaged source code to use
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>X-XWorkSheet</title>
        <link href="XSheet.css" rel="stylesheet">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            html, body {
                height: 100%;
                display: block;
            }
        </style>
        <script src="XSheet.js" type="text/javascript"></script>
    </head>
    <body id="demo">
        <script>
          const dome = document.getElementById('demo');
          const xSheet = new XSheet(demo);
        </script>
    </body>
</html>

Or go directly to the example directory of the source code, open the .html file in the browser directly, and you can see the rich local templates and cases given by the official, all of which support the excel interface for online editing.

Templates and Cases

The following screenshot shows the official case

  1. A purchase order template x-sheet template-purchase order

experience address https://lwebapp.com/example/x-sheet-purchase-order.html

  1. An outbound order template x-sheet template-release list

experience address https://lwebapp.com/example/x-sheet-outbound-order.html

  1. An inventory detail template x-sheet template-stock details

experience address https://lwebapp.com/example/x-sheet-inventory-details.html

  1. A travel plan template x-sheet template-travel plan

experience address https://lwebapp.com/example/x-sheet-travel-plan.html

  1. A project plan template x-sheet template-project plan

experience address https://lwebapp.com/example/x-sheet-project-plan.html

  1. x-sheet displays the 2019 calendar. Similarly, we can construct calendars for more years based on this template and make a DIY calendar x-sheet calendar 2020

experience address https://lwebapp.com/example/x-sheet-calendar-2019.html

  1. x-sheet displays the 2020 calendar x-sheet calendar 2020

experience address https://lwebapp.com/example/x-sheet-calendar-2020.html

  1. x-sheet supports multiple instances, one interface displays multiple spreadsheets, which can be edited separately x-sheet Multi-Instance Demo

experience address https://lwebapp.com/example/x-sheet-multi-instance.html

  1. x-sheet measured cell data of 50,000 rows and 25 columns, sliding very smoothly x-sheet5 million rows of data test

experience address https://lwebapp.com/example/x-sheet-50000-rows-test.html

  1. x-sheet measured 1 million rows and 25 columns of cell data, sliding is also very smooth x-sheet1 million rows of data test

experience address https://lwebapp.com/example/x-sheet-1000000-rows-test.html

Notice

  1. x-sheet supports Modern browsers (chrome, firefox)
  2. The current open source agreement of x-sheet is MOZILLA PUBLIC LICENSE

Conclusion

I have roughly experienced the x-sheet, it can be said to be remarkable

  • Functionally, rich cell styles, rich text, border tilt, merge cells, freeze, undo and redo, format brush and other core functions, also support import and export xlsx files, multiple instances, support for large amounts of data
  • On the interface, the style is similar to Google Sheet, refreshing and comfortable, and the operating experience is very good
  • Lightweight, clear code module split, good scalability for secondary development

Of course, there are some shortcomings, such as not supporting collaboration, imperfect support for shortcut keys, etc. When I experience x-sheet, x-sheet is still in the development stage, so it is inevitable that there are some bugs. If you want to use it in production, you need to do more testing by yourself. This is an open source and free online spreadsheet, I hope you can give it a lot of support, and you are also welcome to submit issues and PRs for exchange and discussion. I hope the author can add more features and continue to maintain this spreadsheet library.

Comments