高效能javascript開源線上excel:x-sheet初體驗

Dushusir 發表於 2021-11-24
JavaScript Excel

原文:免費開源的高效能JavaScript電子表格:X-Sheet入門體驗

背景

隨著網際網路技術特別是網頁應用的發展,我們對線上文件、輕應用的需求越來越高,很多小夥伴都已經習慣雲辦公,線上協同辦公了,常用的就是騰訊文件、金山文件、石墨文件、飛書等,國外主要就是Google Sheet,最近小編發現了一款國人開發高效能前端javascript電子表格,受啟發於Google Sheet,使用HTML5 canvas渲染。接下來,小編分享下入門體驗。

介紹

首先放上x-sheet官方開源地址

https://gitee.com/eigi/x-sheet

https://github.com/eiji-th/x-sheet

線上體驗地址:

https://lwebapp.com/example/x-sheet.html

可以從gitee上拉到最新程式碼到本地看看,這是一個標準的es6現代化工程,自定義webpack打包,執行後還有程式碼分析,其中還有好幾個案例可以參考。

功能列表

我們先看看README上的功能說明

  • 撤銷 & 反撤銷
  • 格式刷
  • 清空格式
  • 文字格式
  • 字型設定
  • 字型大小
  • 字型加粗
  • 斜體字
  • 下劃線
  • 刪除線
  • 文字顏色
  • 單元格顏色
  • 單元格邊框
  • 字型傾斜
  • 邊框傾斜
  • 背景傾斜
  • 合併單元格
  • 水平對齊
  • 自動換行
  • 凍結單元格
  • 單元格函式 (處理中)
  • 行高和列寬設定
  • 複製, 剪下, 貼上 (處理中)
  • 自動填充
  • 插入行, 列 (處理中)
  • 刪除行, 列 (處理中)
  • 隱藏行, 列 (處理中)
  • 支援多個sheet表
  • 列印 (處理中)
  • 資料驗證 (處理中)
  • 匯出XLSX
  • 匯入XLSX (處理中)
  • 匯出CVS (處理中)
  • 匯入CVS (處理中)
  • 匯入圖片 (處理中)
  • 資料篩選 (處理中)

使用

那麼如何啟動一個x-sheet demo呢?由於現在x-sheet還處在開發階段,暫未提供npm包安裝方式,我們可以從原始碼打包使用。

  1. clone程式碼

    git clone https://gitee.com/eigi/x-sheet.git
  2. 進入程式碼目錄,安裝依賴

    cd x-sheet
    npm i
  3. 打包

    npm run build
  4. 打包之後,我們可以自己新建一個html檔案,引入打包後的原始碼使用

    <!DOCTYPE html>
    <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>X-XWorkSheet</title>
         <link href="XSheet.css" rel="stylesheet">
         <style>
             * {
                 padding: 0;
                 margin: 0;
             }
     
             html, body {
                 height: 100%;
                 display: block;
             }
         </style>
         <script src="XSheet.js" type="text/javascript"></script>
     </head>
     <body id="demo">
         <script>
           const dome = document.getElementById('demo');
           const xSheet = new XSheet(demo);
         </script>
     </body>
    </html>

或者直接進入原始碼的example目錄,直接用瀏覽器開啟裡面的.html檔案就能看到官方給的豐富的本地模板和案例了,都是支援線上編輯的excel介面。

模板和案例

以下截圖就展示了官方給出的案例

  1. 一個採購訂單模板
    x-sheet模板-採購訂單

    體驗地址 https://lwebapp.com/example/x-sheet-purchase-order.html
  2. 一個出庫單模板
    x-sheet模板-出庫單

    體驗地址 https://lwebapp.com/example/x-sheet-outbound-order.html
  3. 一個庫存明細模板
    x-sheet模板-庫存明細

    體驗地址 https://lwebapp.com/example/x-sheet-inventory-details.html
  4. 一個旅行計劃模板
    x-sheet模板-旅行計劃

    體驗地址 https://lwebapp.com/example/x-sheet-travel-plan.html
  5. 一個專案計劃模板
    x-sheet模板-專案計劃

    體驗地址 https://lwebapp.com/example/x-sheet-project-plan.html
  6. x-sheet展示2019年日曆,同樣我們根據這個模板,可以構造更多年份的日曆,做一個DIY日曆
    x-sheet日曆2020

    體驗地址 https://lwebapp.com/example/x-sheet-calendar-2019.html
  7. x-sheet展示2020年日曆
    x-sheet日曆2020

    體驗地址 https://lwebapp.com/example/x-sheet-calendar-2020.html
  8. x-sheet支援多例項,一個介面展示多個電子表格,可以分別編輯
    x-sheet多例項Demo

    體驗地址 https://lwebapp.com/example/x-sheet-multi-instance.html
  9. x-sheet實測5萬行25列的單元格資料,滑動很流暢
    x-sheet5萬行資料測試

    體驗地址 https://lwebapp.com/example/x-sheet-50000-rows-test.html
  10. x-sheet實測100萬行25列的單元格資料,滑動也很流暢
    x-sheet100萬行資料測試

    體驗地址 https://lwebapp.com/example/x-sheet-1000000-rows-test.html

注意事項

  1. x-sheet支援Modern browsers(chrome, firefox)
  2. x-sheet現在的開源協議是 MOZILLA PUBLIC LICENSE

體驗總結

大致體驗了下x-sheet,可以說可圈可點

  • 功能上,豐富的單元格樣式,富文字,邊框傾斜,合併單元格,凍結,撤銷重做,格式刷等核心功能,還支援匯入匯出xlsx檔案,多例項,支援大資料量
  • 介面上,風格類似Google Sheet,清爽舒適,操作體驗非常棒
  • 輕量,程式碼模組拆分清晰,二次開發可擴充套件性好

當然也有些不足,比如不支援協同,快捷鍵支援不完善等,小編體驗x-sheet時,x-sheet還處於開發階段,所以難免有些bug存在,如果要在生產使用,需要自己多做測試。這是一款國人開發的開源免費的電子表格,希望大家多多給予支援,也歡迎踴躍提交issue和PR交流探討,希望作者能新增更多功能,繼續維護好這個表格外掛。

原文:免費開源的高效能JavaScript電子表格:X-Sheet入門體驗