[工具] 前端 excel - Handsontable
Ref : https://handsontable.com/ 最近有需要在網頁上用到類似 excel 的功能 於是使用 Handsontable 這個套件 這個套件有分 CE 跟 Pro 版本 CE也就是 Community Edition, 通常是免費的 Pro 則是有額外強大的功能, 要收費的 這邊就簡單筆記一下我用到的部分 (CE) <!-- 需要一個裝 handsontable 的容器 --> <div id="handsome-table"> <button class="btn btn-success pull-right" id="export-btn">匯出EXCEL</button> 底下是 js 的部分 // 定義好欄位名稱 const COL_HEADER = [ 'Permalink', '觸及', '點擊', '點擊率', '負評', '負評率' ]; let container = document.getElementById('handsome-table'); // 裝 handsontable 的 data array // handsontable 是直接操控 data, 也就是 data-binding // 這個到後面很好用 let data = []; // 定義匯出 handsontable 的按鈕 let $exportBtn = $('#export-btn'); // 初始化 handsontable let hot = new Handsontable(container, { data: data, // 定義資料的 schema, 讓資料不要只是用陣列呈現, 而是物件 dataSchema: { permalink: null, impression: null, click: null, clickRate: ...