在線EXCEL編輯器-Luckysheet


Luckysheet
js,web,excel,開源

Github

在線deme

論壇地址


現如今,web-excel,比較流行的如騰訊文檔,金山文檔,石墨文檔,google doc,以及其他開源excel,這些產品都很好,但是要么未開源,要么收費,那么有沒有一款開源免費的在線excel,供我們使用?當然是肯定的,它就是Luckysheet,完全開源且免費

來自Luckysheet作者的聲音

"我們決心制作一個功能最豐富,配置和使用最簡單的開源電子表格-Luckysheet,為企業報表平台和數據分析平台提供支持,並建立一個數據分析社區。具體來說,我們提供了一個類似於excel的在線編輯表格,其中包含單元格樣式,公式,過濾,凍結和其他功能。我們基本支持excel的常用功能,數據分析,顯示和編輯的需求。"

Luckysheet項目展示

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

Luckysheet是用純JavaScript編寫的前端表格庫,可以嵌入到任何前端項目或應用程序中,增強原有的系統功能,而無需使用excel或其他復雜的軟件進行數據處理。這使我們的數據處理、分析、顯示和存儲可以由一個系統完成,而無需切換平台,不切換系統,便於集成和完全自動化。

類excel---特性

  • 格式設置
  • 單元格
  • 行和列操作
  • 操作體驗
  • 公式和函數
  • 表格操作
  • 數據透視表
  • 圖表
  • 分享及寫作

Luckysheet專有---特性

  • 矩陣計算
  • 截圖 (把選區的內容進行截圖展示)
  • 復制到其他格式
  • EXCEL,CSV,TXT 導入及導出
  • 插入圖片和svg形狀
  • 數據驗證(表單功能)
  • 單元格內多樣式


使用

環境

Node.js Version >= 6

安裝
npm install
npm install gulp -g
開發

開發

npm run dev

打包

npm run build

用法

第一步

第一種方法 --- 通過CDN引入依賴

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

第二種方法 --- 本地引入

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>

第二步

指定一個表格容器

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

第三步

創建一個表格

<script>
    $(function () {
        //配置項
        var options = {
            container: 'luckysheet' //luckysheet為容器id
        }
        luckysheet.create(options)
    })
</script>


體驗

鏈接無法跳轉請復制鏈接跳轉


最后附上demo效果圖
在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM