1. 首頁 > 生活百科 > >

提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件

生活百科

Chrome插件，官方名稱extensions（擴展程序）；為了方便理解，以下都稱為插件 。我們開發的插件需要在瀏覽器里面運行 ， 打開瀏覽器，通過右上角的三個點（自定義及控制）-更多工具-拓展程序-打開開發者模式 。點擊"加載已解壓的拓展程序，選擇項目文件夾，就可將開發中的插件加載進來 。插件是基于Web技術構建的，例如HTML、JavaScript和CSS 。它們在單獨的沙盒執行環境中運行并與Chrome瀏覽器進行交互 。插件允許我們通過使用API修改瀏覽器行為和訪問Web內容來擴展和增強瀏覽器的功能 。相信使用Chrome(谷歌瀏覽器)的小伙伴們都在用Chrome擴展插件(Chrome Extension) ， 類似一鍵翻譯、批量下載網頁圖片、OneTab、甚至大名鼎鼎的 ”油猴” 等 。
但是有時候 ， 我們需要一些Chrome應用市場上沒有的特定功能的插件 ， 例如任務提醒、報表自動生成、與內部數據系統交互的數據分析或上傳下載等 。作為產品論壇技術支持的超級版主，每日需要回復用戶提出的大量問題，往往一個不注意，很容易漏回用戶帖子 。這時候有這么一個瀏覽器插件，隨時提醒你還有多少帖子待回復，是不是很炫酷呢？當你晚上回復完所有論壇帖子，這時候插件徽章上不再有數字，這時候是不是成就感滿滿 。

提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件

文章插圖
今天我們就帶大家來花30分鐘時間，一起寫一個展示待辦任務的瀏覽器插件 。
獲取本文的完整Demo：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjM4NjU0fDgyODE0ZTIyfDE2NjYxODc0ODV8NjI2NzZ8OTk3MTg%3D
接下來就讓我們正式開始項目
  1. 首先在package.json文件中引入相關依賴文件
{  "dependencies": {    "@grapecity/spread-excelio": "15.2.0",    "@grapecity/spread-sheets": "15.2.0",    "@grapecity/spread-sheets-resources-zh": "15.2.0"  }}
  1. 其次創建容器 。在manifest.json文件中，可以配置點擊插件圖標時彈出的小窗口的頁面 。這里配置了index.html頁面 。
    提高工作效率的神器：基于前端表格實現Chrome Excel擴展插件

    文章插圖
接著我們在index.html中創建SpreadJS的目標DOM元素：
<div id="ss" style="width: 99%; height: 430px;"></div>
  1. 創建容器之后，就可以初始化SpreadJS了 。在GC.Spread.Sheets.Workbook構造函數中，有兩個參數 。第一個參數是宿主dom元素或者id，這里是‘ss’ 。第二個參數是初始化選項 。這里設置了三個值： sheetCount、scrollbarMaxAlign、newTabVisible；分別表示表單數量，滾動條與活動表單的最后一行和最后一列對齊，不顯示新增表單選項 。
window.onload = function () {var spread = new GC.Spread.Sheets.Workbook("ss",{ sheetCount: 1, scrollbarMaxAlign:true, newTabVisible:false });};
  1. 獲取SpreadJS對象后，就可以進行綁定數據、進行數據展示啦 。首先可以為其綁定列 ， 自定義表頭，根據列名設置寬度，根據內容設置數據格式或者單元格類型等 。這時候可以定義帖子標題，發帖時間 ， 是否金牌用戶、地區等等信息 。
var sheet = spread.getActiveSheet();var colInfos = [                {name: "帖子標題", displayName: "帖子標題", size: 300},                {                    name: "發帖時間",                    displayName: "發帖時間",                    size: 100,                    formatter: "MM-dd hh:mm",              },{                name: "city",                displayName: "地區",                cellType: ColorArea              },     ];     sheet.autoGenerateColumns = false;     sheet.bindColumns(colInfos);

推薦閱讀