Luckysheet, the strongest domestic open source spreadsheet, has won the first place in Github trending!

background

Now, with the vigorous development of web technology, office applications, especially excel, have moved online. The more popular ones are Tencent documents, Jinshan documents, graphite documents and google doc, which belong to enterprise services. But what if small businesses or teams want to build their own online form system? Is there an open source solution?

According to the author's investigation, some tables have relatively simple functions, which can only display data and filter functions, or some tables support multiple cell styles, but such functions need to be paid. More famous are spreadjs and handsontable. These two plug-ins have obvious shortcomings. The charge for value-added functions of spreadjs is too expensive, and there are many secondary development pits for handsontable.

introduce

"We are determined to create an open source spreadsheet with the most abundant functions and the simplest configuration and use - Luckysheet, which provides support for the enterprise report platform and data analysis platform, and establish a data analysis community. Specifically, we provide an on-line editing table similar to excel, which includes cell style, formula, filtering, freezing and other functions. We basically support the common functions of Excel, data analysis, Display and edit requirements. "-- author of lucky sheet

More conveniently, Luckysheet is a front-end table library written in pure JavaScript, which can be embedded into any front-end project or application to enhance the original system functions without using excel or other complex software for data processing. This enables our data processing, analysis, display and storage to be completed by one system without switching platforms and systems, which is convenient for integration and complete automation.

experience

Official website link:

characteristic

Briefly list several main functions

  1. Table settings, including freezing rows and columns, merging cells, filtering, sorting, query, conditional format and annotation;
  2. Support data analysis functions, including pivot table, column, matrix operation and built-in 385 calculation functions;
  3. Support one click screenshot, copy as json data, share editing, copy and paste data between excel and lucky sheet
  4. Enhanced functions such as excel import, picture insertion, data validation and inline style
  5. Support mobile terminal viewing
  6. wait...

Open the online DEMO experience, the speed is also very fast, and the operation is basically the same as that of excel

Recently, Luckysheet has updated a highlight function, which supports excel import in xlsx format, and export is also under development.

excel import Demo

Function and architecture

Here are a few core functions that look really powerful. You can see that the author is doing it with great care and actively maintaining it. More details can be seen on the official website.

use

Let's follow the tutorial and take a look

environment

Node.js Version >= 6

install

npm install
npm install gulp -g

development

development

npm run dev

pack

npm run build

usage

First step

Introducing dependencies through CDN

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

Step two

Specify a table container

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

Step 3

Create a table

<script>
    $(function () {
        //Configuration item
        var options = {
            container: 'luckysheet' //luckysheet is the container id
        }
        luckysheet.create(options)
    })
</script>

summary

It is expected that the open source spreadsheet will be further improved, but it should be able to meet the basic needs of the project.

Tags: Javascript canvas Open Source spreadsheet

Posted by labmixz on Wed, 11 May 2022 20:18:26 +0300