gridjs-spreadsheet
A web-based JavaScript spreadsheet for GridJs client side
Document
It allows you to view and edit spreadsheet documents with ease.
this is developed based on https://github.com/myliang/x-spreadsheet
CDN
<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@22.11.0/xspreadsheet.css">
<script src="https://unpkg.com/gridjs-spreadsheet@22.11.0/xspreadsheet.js"></script>
<script>
const sheetstr="[{\"name\":\"Sheet1\",\"sheetid\":\"s0\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"styles\":[{\"textwrap\":true,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}},{\"textwrap\":false,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}}],\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":532},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"3\":{\"height\":122,\"cells\":{\"2\":{\"text\":\"FFF呜呜呜\\n呜我 我我我我\\nnice wwwwww\\nexample work 测的的的的的的的到\\n到手 一级 一季报 击败发发发发发发发发发发发\",\"style\":0,\"rtxt\":[{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"F\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"italic\":false},\"txt\":\"FF呜\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"\\n呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#0070C0\",\"italic\":false},\"txt\":\"我 我我\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"我我\\nni\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":true,\"color\":\"#C00000\",\"italic\":true},\"txt\":\"ce wwwwww\\nexample\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\" work \"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"italic\":false},\"txt\":\"测的的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"的到\\n到手 \"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"一级 一季\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"报 击败发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#9BBB59\",\"italic\":false},\"txt\":\"发发发发发发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"发发发发\"}],\"html\":\"<Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">F</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">FF呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"><Br>呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #0070c0;\\\">我 我我</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">我我<Br>ni</Font><Font Style=\\\"FONT-WEIGHT: bold;FONT-STYLE: italic;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c00000;\\\">ce wwwwww<Br>example</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"> work </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">测的的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的到<Br>到手 </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #000000;\\\">一级 一季</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">报 击败发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #9bbb59;\\\">发发发发发发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">发发发发</Font>\"},\"4\":{\"text\":\"\",\"style\":1}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet2\",\"sheetid\":\"s1\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet3\",\"sheetid\":\"s2\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}}]";
xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
console.log(cdata);
console.log(xs.validate());
}
</script>
NPM
npm install gridjs-spreadsheet
<div id="x-spreadsheet-demo"></div>
import Spreadsheet from "gridjs-spreadsheet";
const s = new Spreadsheet("#x-spreadsheet-demo")
.loadData({})
.change(data => {
});
s.validate()
{
mode: 'edit',
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,
},
},
}
Bind events
const s = new Spreadsheet("#x-spreadsheet-demo")
s.on('cell-selected', (cell, ri, ci) => {});
s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
s.on('cell-edited', (text, ri, ci) => {});
update cell-text
const s = new Spreadsheet("#x-spreadsheet-demo")
s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
get cell and cell-style
const s = new Spreadsheet("#x-spreadsheet-demo")
s.cell(ri, ci);
s.cellStyle(ri, ci);
Features
- Paint format
- Clear format
- Format
- Font
- Font size
- Font bold
- Font italic
- Underline
- Strike
- Highlight
- Shape/Image resize/rotate/position ajustment
- Text color
- Fill color
- Borders
- Merge cells
- Align
- Text wrapping
- Freeze cell
- Functions
- Resize row-height, col-width
- Copy, Cut, Paste
- Autofill
- Insert row, column
- Delete row, column
- hide row, column
- multiple sheets
- print
- Data validations
Demo
for more detail ,please check
https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs
Browser Support
Modern browsers(chrome, firefox, Safari).
LICENSE
MIT
Server Side Support
Product Page | Product Documentation | Blog |API Reference | Source Code Samples | Free Support