簡(jiǎn)述 作者：myliang
這是一個(gè)基于 Web(es6) canvas 構(gòu)建的輕量級(jí) Excel 開發(fā)庫(kù)，像這樣：
基礎(chǔ)功能： 或者查看 demo
快速入門開發(fā) CDN 你可以直接在 html 靜態(tài)文件中引入
< linkrel = " stylesheet" href = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css" > < scriptsrc = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js" > </ script> < script> x_spreadsheet ( '#xspreadsheet' ) ; </ script> 1 2 3 4 5 6
NPM 你可以使用 npm 包的形式安裝
npm install x-data-spreadsheet1 2
在 html 中
< divid = " x-spreadsheet-demo" > </ div> 1
在 js 中
import Spreadsheet from "x-data-spreadsheet" ; const s = new Spreadsheet ( "#x-spreadsheet-demo" )
. loadData ( { } )
. change ( data => {
} ) ; s. validate ( ) 1 2 3 4 5 6 7 8 9 10 11 12
默認(rèn)配置 {
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 ,
} ,
} , } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
導(dǎo)入和導(dǎo)出 關(guān)于如何導(dǎo)出，請(qǐng)查看 如果需要自定義導(dǎo)出，可以使用 SheetJs 來完成導(dǎo)出，并且再次感謝
綁定事件 簡(jiǎn)單的事件綁定
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 ) => { } ) ; 1 2 3 4 5 6
快速設(shè)定單元格值 通過instance.cellText(ri,ci,text)來設(shè)定值，調(diào)用reRender()來刷新，你將會(huì)看到數(shù)據(jù)的變化
const s = new Spreadsheet ( "#x-spreadsheet-demo" )
s. cellText ( 5 , 5 , 'xxxx' ) . cellText ( 6 , 5 , 'yyy' ) . reRender ( ) ; 1 2
獲取選定表格中單元的樣式和值 const s = new Spreadsheet ( "#x-spreadsheet-demo" ) s. cell ( ri, ci) ; s. cellStyle ( ri, ci) ; 1 2 3 4 5
快速本地化 如果是在 js 中引入 如果遇到更多問題，可以查看 issue #281
import Spreadsheet from 'x-data-spreadsheet' ;
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn' ;
Spreadsheet. locale ( 'zh-cn' , zhCN) ;
new Spreadsheet ( document. getElementById ( 'xss-demo' ) ) 1 2 3 4 5 6
可以使用 CDN < linkrel = " stylesheet" href = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css" > < scriptsrc = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js" > </ script> < scriptsrc = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/locale/zh-cn.js" > </ script> < script> x_spreadsheet. locale ( 'zh-cn' ) ; </ script> 1 2 3 4 5 6 7 8
加入開發(fā)者
git clone https://github.com/myliang/x-spreadsheet.git
cd x-spreadsheet
npm install
npm run dev1 2 3 4 5 6 7 8
瀏覽器支持 chrome, firefox, Safari
許可申明 MIT 協(xié)議
聯(lián)系我們 聯(lián)系方式
QQ群(1已滿): 980597168
QQ群(2):904361146
400 186 1886
