最近因為項目要求，需要在頁面上添加一個在線編輯excel的功能，因此只能在網(wǎng)上找有沒有直接用的插件，最后很幸運的是幸好找到了一個 ----luckysheet.

? ? ? 這個是從luckysheet官網(wǎng)上找的圖片，先看下能用插件做那些效果。

??這個是中文官網(wǎng)地址:Luckysheet文檔

　　這個是vue3項目的github地址：GitHub - dream-num/luckysheet-vue: luckysheet vue demo

　　官方文檔很詳細，具體使用很簡單，差不多跟Echarts 一樣，配置數(shù)據(jù)結(jié)構(gòu)，然后插件初始化即可。

　　接下來介紹下這個插件的使用方法：

　使用步驟

　　先說下我當(dāng)前的開發(fā)環(huán)境："vue": "^3.2.37",luckysheet:2.2.12

　　1.依賴引入

　　　　官方推薦了2種方法：1.使用CDN的方式引入在jsdelivr公共庫的文件，2.把文件下載到本地，然后本地引入。

　　　　本人推薦本地引入較好，一個是可以在離線環(huán)境下正常使用，另一個是在開發(fā)時期，突然發(fā)現(xiàn)插件不能使用，最后定位到j(luò)sdelivr公共庫加載超時，還是保險本地引入較好。

　　　　對應(yīng)的css樣式文件和js文件最好在最外層的index.html引入。

? ? ? ? 2. 指定表格容器

????指定一個帶有id的容器，可以封裝成組件調(diào)用

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

????然后根據(jù)文檔添加配置項，最后初始化表格即可。

????

????整個結(jié)構(gòu)跟配置echarts一樣，需要什么功能或者什么樣式，直接在 options 進行配置即可。接下來講下常用的幾個配置屬性。

?功能配置

??配置項根據(jù)范圍分為兩種：1.表格插件的公共配置項 。2.單個sheet表單的配置項。大概結(jié)構(gòu)如下。

const options = { // 公共配置項
    container: 'luckysheet1', // luckysheet為容器id
    lang: 'zh', // 設(shè)定表格語言
    title:'', // 設(shè)定表格名稱
    forceCalculation:true,
    index:'0',
    status:'1',
    order:'0',
    hide:'0',
    column:30, // 列數(shù)
    row:50, // 行數(shù)
    showtoolbar:true, // 工具欄
    showinfobar:false, // 信息欄
    showsheetbar:false, // 底部sheet頁
    sheetFormulaBar:false, // 是否顯示公式欄
    showsheetbarConfig:{},// 自定義底部sheet頁
    sheetRightClickConfig:{},//自定義底部sheet頁右擊菜單 
    showtoolbarConfig:{}, // 自定義配置工具欄
    cellRightClickConfig:{}, // 右鍵配置
    data:[  // 表格sheet的個數(shù)和配置項
        {
            "name":"Sheet1",
            "defaultRowHeight":25
        }，
        {
            "name":"Sheet2",
            "defaultRowHeight":25
        }，
        
    ]
}
// 初始化表格
luckysheet.create(options)

??有關(guān)公共配置項和單個sheet的配置項、官方文檔寫的很詳細，使用上很簡單，就不再這太詳細的介紹了。

? 表格數(shù)據(jù)的保存和初始化

??先介紹下luckysheet插件的數(shù)據(jù)是怎么使用的。

? ? ? 當(dāng)插件初始化后，我們在表格內(nèi)隨意填入幾個數(shù)字。

??然后在控制臺內(nèi)使用官方提供的方法看下插件里的數(shù)據(jù)。

??重點數(shù)據(jù)都在標(biāo)出來的兩個數(shù)組，其他大部分都是描述表格的基本配置。

??接下來打開這兩個數(shù)組，看下里面的數(shù)據(jù)。

??對比一開始在表格內(nèi)填寫的數(shù)字和位置，很明顯的看出 celldata 里存的是已經(jīng)填寫的單元格信息，包含每個單元格所在的行(r)，列(c)，以及填寫的數(shù)據(jù)(v:m).

??而data里面則是用二維數(shù)組的方式記錄已經(jīng)使用的單元格信息，里面單元格數(shù)據(jù)跟 celldata 的類似。

??這就很明顯了，如果想要在表格內(nèi)初始化加載數(shù)據(jù)，或者是把數(shù)據(jù)保存到后臺，只要處理數(shù)據(jù)即可。

??(注:如果有加自定義表格樣式或者自定義插件配置，最好的方法是把通過 luckysheet.getAllSheets() 獲取到的數(shù)據(jù)全部進行存儲。然后通過optins.data 完成單個表格數(shù)據(jù)的初始化)

　　另外有空的話，在擴展一個基于websocket實現(xiàn)的共同編輯文檔，期待下一個文章吧。

?出現(xiàn)的問題

??在做表格數(shù)據(jù)的存儲時，發(fā)現(xiàn)一個問題，如果在表格內(nèi)輸入完最后一個數(shù)字，在最后一個單元格在選中編輯的狀態(tài)下，是無法通過luckysheet.getAllsheet()獲取到這個單元格數(shù)據(jù)的，因此在上傳數(shù)據(jù)之前，需要另外加一條命令。

luckysheet.exitEditMode(); // 退出編輯模式

??退出編輯模式，接下來就能獲取到全部數(shù)據(jù)了。

　　2023/8/16 追加：

　　突然想到還有一個遇到的問題：就是表格里面的數(shù)據(jù)是可以自定義添加的，只要計算好要放在那個位置，計算好行（r）,列（c).然后分別添加到 data 和 celldata(注意存放到二維數(shù)組的位置) 里面即可。該功能可以做導(dǎo)出數(shù)據(jù)到表格內(nèi)部的功能。

　　但是如果你添加的數(shù)據(jù)行/列數(shù)超過設(shè)置默認行/列數(shù)，就會數(shù)據(jù)導(dǎo)出到表格內(nèi)失敗，data 數(shù)組里面沒太大關(guān)系，主要是 celldata 二維數(shù)組，要自己手動添加到符合長度的行/列數(shù)?；蛘咧苯釉谂渲美锩娓男?列數(shù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-780482.html

到了這里，關(guān)于Luckysheet：一個純前端的excel在線表格的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！