A Powerful and Simple Online Spreadsheet Like Excel

Luckysheet is an online spreadsheet like Excel that’s powerful, easy to configure, and completely open-source. This JavaScript library for creating a full-featured live spreadsheet application similar to Google Sheets.

An Easier Excel Style Spreadsheet App With Vue.js

How to make use of it:

1. Load the mandatory JavaScript and CSS information within the doc.

<link rel="stylesheet" href="./plugins/css/pluginsCss.css" />
<link rel="stylesheet" href="./plugins/plugins.css" />
<link rel="stylesheet" href="./css/luckysheet.css" />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

2. Create a container component to hold the spreadsheet.

<div id="luckysheet"></div>

3. Make the spreadsheet fullscreen.

#luckysheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

4. Create a brand new spreadsheet instance and executed it.

luckysheet.create({
  container: 'luckysheet'
})

5. All default configuration choices.

luckysheet.create({

  // container ID
  container: "luckysheet",

  // number of columns
  column: 60,

  // number or rows
  row: 84,

  // enables copy to clipboard
  allowCopy: true, 

  // shows toolbar
  showtoolbar: true,

  // shows top bar
  showinfobar: true,

  // shows bottom sheet bar
  showsheetbar: true, 

  // shows statistic bar
  showstatisticBar: true,

  // table options
  pointEdit: false, 
  pointEditUpdate: null, 
  pointEditZoom: 1,

  // default data
  data: [{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1  }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2  }],

  // speadsheet title
  title: "Luckysheet Demo",

  // user info
  userInfo: ' rabbit', 

  // popup menu items
  userMenuItem: [{url:"www.baidu.com", "icon":'', "name":"My Sheet"}, {url:"www.baidu.com", "icon":'', "name":"Exit"}]

  // back button URL
  myFolderUrl: "www.baidu.com",

  // configs of cell height, width, formula, etc.
  config: {},

  // fullscreen mode
  fullscreenmode: true,

  // device pixel ratio
  devicePixelRatio: window.devicePixelRatio,

  // allows the user to edit
  allowEdit: true,

  // load data via AJAX
  loadUrl: "", 
  loadSheetUrl: "", 

  // unique ID
  gridKey: "",

  // update URL
  updateUrl: "",

  // image url
  updateImageUrl: "",

  // allows to update on the back end
  allowUpdate: false,

  // function buttons
  functionButton: "",

  showConfigWindowResize: true, 

  // enables add row
  enableAddRow: true,

  // enables add column
  enableAddCol: true,

  // enables load the next page
  enablePage: false,

  // auto format numbers
  autoFormatw: false,

  // "0" or 0
  accuracy: undefined, 

  pageInfo:{
    'queryExps':'',
    'reportId':'',
    'fields':'',
    'mobile':'',
    'frezon':'',
    'currentPage':'',
    "totalPage":10,
    "pageUrl":"",
  },

  // is edit mode
  editMode: false,

  // custom functions
  chartConfigChange: null,
  beforeCreateDom: null,
  fireMousedown: null,

  // language
  lang: 'en',

  //plugins, e.g. ['chart']
  plugins: []

})

Full-feature Online Spreadsheet, Luckysheet Plugin/Github