簡述 作者:myliang
這是一個基于 Web(es6) canvas 構(gòu)建的輕量級 Excel 開發(fā)庫,像這樣:
基礎(chǔ)功能: 撤銷重做
添加行列
刪除行列
隱藏行列
動態(tài)調(diào)整行列功能
凍結(jié)行列
添加邊框/顏色/邊框線條樣式
合并單元格
復(fù)制
粘貼
打印
公式
篩選
自動填充
多表支持
字體樣式
自定義字體/大小/顏色
填充前景色/背景色
格式校驗
對齊方式
文字換行
或者查看 demo
快速入門開發(fā) CDN 你可以直接在 html 靜態(tài)文件中引入
< link rel = " stylesheet" href = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css" > < script src = " 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-spreadsheet
1 2
在 html 中
< div id = " 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
默認配置 {
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)出,請查看 如果需要自定義導(dǎo)出,可以使用 SheetJs 來完成導(dǎo)出,并且再次感謝
綁定事件 簡單的事件綁定
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()
來刷新,你將會看到數(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 < link rel = " stylesheet" href = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css" > < script src = " https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js" > </ script> < script src = " 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 dev
1 2 3 4 5 6 7 8
瀏覽器支持 chrome, firefox, Safari
許可申明 MIT 協(xié)議
聯(lián)系我們 聯(lián)系方式
QQ群(1已滿): 980597168
QQ群(2):904361146
該文章在 2024/6/11 10:03:15 編輯過