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

Dushusir發表於2021-11-24
JavaScriptExcel

原文：免費開源的高效能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入門體驗

相關文章