Original: Free and open source high-performance JavaScript spreadsheet: X-Sheet entry experience
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 Tencent documents, Kingsoft documents, and graphite documents. Google Sheet, Feishu, etc., abroad is mainly Google Sheet. Recently, Xiaobian discovered a high-performance front-end javascript spreadsheet developed by Chinese people. Inspired by Google Sheet, it uses HTML5 canvas rendering. Next, I will share the introductory experience.
introduce
First put the official open source address of 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, with custom webpack packaging, and code analysis after running. There are several cases for reference.
function list
Let’s take a look at the function description on the README
- Cancellation & Anti-Cancellation
- Format Painter
- Clear format
- text format
- Font settings
- font size
- Font bold
- italics
- Underscore
- Strikethrough
- Text color
- Cell color
- Cell border
- Font slanted
- Slanted border
- Background tilt
- Merge Cells
- Horizontal alignment
- Word wrap
- Freeze cell
- Cell function (processing)
- Row height and column width settings
- Copy, cut, and paste (processing)
- Auto fill
- Insert row, column (processing)
- Delete row, column (processing)
- Hidden row, column (processing)
- Support multiple sheets
- Print (processing)
- Data verification (in process)
- Export XLSX
- Import XLSX (processing)
- Export CVS (processing)
- Import CVS (processing)
- Import picture (processing)
- Data screening (processing)
use
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.
clone code
git clone https://gitee.com/eigi/x-sheet.gitEnter the code directory, install dependencies
cd x-sheet npm iPack
npm run buildAfter 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 directly enter the example directory of the source code, and open the .html file in the browser directly to 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
A purchase order template
Experience address https://lwebapp.com/example/x-sheet-purchase-order.html
An outbound order template
Experience address https://lwebapp.com/example/x-sheet-outbound-order.html
An inventory detail template
Experience address https://lwebapp.com/example/x-sheet-inventory-details.html
A travel plan template
Experience address https://lwebapp.com/example/x-sheet-travel-plan.html
A project plan template
Experience address https://lwebapp.com/example/x-sheet-project-plan.html
x-sheet displays the 2019 calendar, and according to this template, we can construct calendars for more years and make a DIY calendar
Experience address https://lwebapp.com/example/x-sheet-calendar-2019.html
x-sheet displays the 2020 calendar
Experience address https://lwebapp.com/example/x-sheet-calendar-2020.html
x-sheet supports multiple instances, one interface displays multiple spreadsheets, which can be edited separately
Experience address https://lwebapp.com/example/x-sheet-multi-instance.html
x-sheet measured 50,000 rows and 25 columns of cell data, sliding smoothly
Experience address https://lwebapp.com/example/x-sheet-50000-rows-test.html
The x-sheet measured 1 million rows and 25 columns of cell data, and the sliding is also very smooth
Experience address https://lwebapp.com/example/x-sheet-1000000-rows-test.html
Precautions
- x-sheet supports Modern browsers (chrome, firefox)
- The current open source agreement of x-sheet is MOZILLA PUBLIC LICENSE
Experience summary
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 the editor experiences 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 electronic form developed by Chinese people. I hope you can give us a lot of support, and you are also welcome to submit issues and PR for exchanges and discussions. I hope that the author can add more functions and continue to maintain this form plug-in.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。