開源工具

下面給你一份純HTML/JS/前端開源工具清單,完全覆蓋你要的:Web建站、Word/Excel/PPT替代、數據庫、圖牀,全部開源、可本地/私有化部署、可嵌入Obsidian。

一、Web建站(純HTML/無後端/可視化)

  1. GrapesJS(可視化拖拽建站)
  • 定位:無代碼可視化網頁構建器,純前端開源
  • 核心:拖拽組件 → 自動生成HTML/CSS/JS,可導出純靜態頁面
  • 用途:做個人站、 landing page、作品集、知識庫首頁
  • 優勢:零後端、可嵌入Obsidian、可二次開發
  • 開源:GitHub 24k+ Star
  1. Bootstrap Studio(可視化+代碼)
  • 定位:可視化+代碼混合建站,基於Bootstrap
  • 核心:拖拽生成響應式頁面,一鍵導出純HTML/CSS/JS
  • 用途:快速做官網、後台頁面、表單係統
  • 優勢:純前端、可本地運行、可嵌入Obsidian

 

二、替代Word(HTML富文本/文檔)

  1. OnlyOffice Docs(開源Web Office)
  • 定位:純HTML5 Canvas實現,開源、可私有化部署
  • 核心:完整替代Word(docx)、Excel(xlsx)、PPT(pptx)
  • 功能:富文本、樣式、表格、圖片、批註、導出PDF/HTML
  • 優勢:可嵌入iframe、支持本地/離線版(OnlyOffice Personal)
  • 開源:GitHub 10k+ Star
  1. Tiptap / ProseMirror(純前端富文本編輯器)
  • 定位:可嵌入的HTML富文本編輯器,完全開源
  • 核心:生成乾淨HTML,無冗餘代碼,可自定義工具欄
  • 用途:在Obsidian/網頁裡做Word級文檔編輯
  • 優勢:輕量、可擴展、可導出純HTML

 

三、替代Excel(純前端表格/數據處理)

  1. Luckysheet(最強純前端Excel)
  • 定位:純HTML/JS實現,開源、零後端、媲美Excel
  • 核心:公式、篩選、排序、圖表、凍結、合併單元格、復製粘貼
  • 用途:2000行+數據處理、財務表、清單、數據庫前端
  • 優勢:可嵌入Obsidian、可導出xlsx、純本地運行
  • 開源:GitHub 15k+ Star
  1. Handsontable(企業級數據表格)
  • 定位:純前端可編輯表格,開源、支持大數據量
  • 核心:單元格編輯、篩選、排序、拖拽、自定義渲染
  • 用途:數據管理、CRM、報表、數據庫前端
  • 優勢:穩定、API豐富、可嵌入任何HTML頁面
  1. EtherCalc(極簡在線表格)
  • 定位:輕量開源表格,單文件部署、零數據庫
  • 核心:公式、多人協作、數據以URL/本地存儲
  • 用途:臨時數據、清單、預算表
  • 優勢:秒開、不卡、可離線

 

四、替代PPT(HTML演示/幻燈片)

  1. Reveal.js(最流行HTML PPT)
  • 定位:純HTML/JS開源演示框架,零後端
  • 核心:幻燈片、動畫、3D、代碼高亮、Markdown支持
  • 用途:匯報、演講、教程、產品演示
  • 優勢:可嵌入Obsidian、全屏播放、導出PDF
  • 開源:GitHub 60k+ Star
  1. impress.js(3D空間PPT)
  • 定位:3D旋轉/平移HTML演示,純前端
  • 核心:空間化幻燈片、炫酷轉場、適合創意演示
  • 用途:發布會、作品集、技術分享
  • 優勢:純HTML、可本地運行

 

五、HTML做數據庫(純前端/無服務器)

  1. LocalForage / IndexedDB(瀏覽器內置數據庫)
  • 定位:瀏覽器原生持久化存儲,純前端、零後端
  • 核心:存儲JSON/文本/文件、增刪改查、離線可用
  • 用途:個人數據、清單、配置、2000行數據本地存儲
  • 優勢:完全免費、無服務器、可嵌入Obsidian
  1. PouchDB(同步型前端數據庫)
  • 定位:開源、可離線、可與CouchDB同步
  • 核心:文檔型數據庫、查詢、索引、同步
  • 用途:本地知識庫、多設備同步、離線數據管理
  • 優勢:純JS、可嵌入任何HTML頁面
  1. SQL.js(瀏覽器內SQLite)
  • 定位:WebAssembly實現的SQLite,純前端運行SQL
  • 核心:完整SQL語法、表、查詢、事務
  • 用途:復雜數據查詢、報表、數據庫前端
  • 優勢:零後端、可本地運行、支持導入SQL文件

 

六、圖牀(HTML上傳/圖片託管)

  1. CloudFlare-ImgBed(免費+CDN+無服務器)
  • 定位:基於Cloudflare R2/KV的開源圖牀,零成本
  • 核心:HTML5上傳、返回URL、CDN加速、版本管理
  • 用途:Obsidian圖片、博客、網頁圖片託管
  • 優勢:免費、全球加速、完全開源、可私有化
  1. Lsky Pro(蘭空圖牀,成熟開源)
  • 定位:PHP+HTML開源圖牀,支持本地/雲存儲
  • 核心:上傳、管理、外鏈、壓縮、防盜鏈、API
  • 用途:個人/團隊圖片託管、Obsidian圖牀
  • 開源:GitHub 4.5k+ Star
  1. PicGo + GitHub + jsDelivr(純免費靜態圖牀)
  • 定位:純前端+GitHub存儲+CDN加速,零成本
  • 核心:上傳→GitHub→jsDelivr CDN→返回URL
  • 用途:個人博客、Obsidian、Markdown圖片
  • 優勢:完全免費、穩定、無服務器

 

七、一站式方案:把所有工具塞進Obsidian

你可以在Obsidian裡直接嵌入這些工具,一個軟件搞定全部:

1. Word/文檔:嵌入 OnlyOffice / Tiptap HTML 2. Excel/數據:嵌入 Luckysheet HTML(支持2000行粘貼) 3. PPT/演示:嵌入 Reveal.js HTML 4. 數據庫:用 LocalForage / SQL.js 做本地數據存儲 5. 圖牀:用 CloudFlare-ImgBed 做圖片上傳 6. 建站:用 GrapesJS 做個人站,導出HTML放進Obsidian

 

八、給你的2000行數據導入方案(最實用)

方案A:純前端(零後端,最推薦)

1. 用 Luckysheet 做一個HTML表格頁面 2. 從Excel復製2000行 → 直接粘貼進網頁(自動分列) 3. 數據存在瀏覽器 LocalForage/IndexedDB(永久保存) 4. 可導出xlsx、可嵌入Obsidian、可本地運行

方案B:輕量後端(適合長期管理)

1. 用 Lsky Pro 做圖牀 + SQL.js 做數據庫 2. 上傳CSV/Excel → 自動解析成HTML表格 3. 數據存在本地文件/雲存儲,可查詢、篩選、導出

 

九、我可以直接給你的成品

你要的話,我可以馬上給你:

  • 一個 可直接用的HTML超級表格(支持2000行粘貼、自動匹配、導出xlsx)
  • 一個 Obsidian專用HTML模板(嵌入Luckysheet+圖牀+本地數據庫)
  • 一個 純前端建站模板(GrapesJS導出,可直接放進Obsidian)

需要我先把那個支持2000行數據的HTML超級表格完整代碼發給你嗎?你直接保存成html就能用,也能放進Obsidian。