相信使用Chrome(谷歌瀏覽器)的小伙伴們都在用Chrome擴(kuò)展插件(Chrome Extension)，類(lèi)似一鍵翻譯、批量下載網(wǎng)頁(yè)圖片、OneTab、甚至大名鼎鼎的“油猴” 等。

 但是有時(shí)候，我們需要一些Chrome應(yīng)用市場(chǎng)上沒(méi)有的特定功能的插件，例如任務(wù)提醒、報(bào)表自動(dòng)生成、與內(nèi)部數(shù)據(jù)系統(tǒng)交互的數(shù)據(jù)分析或上傳下載等。

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶(hù)青睞。SpreadJS 為用戶(hù)帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí)，滿(mǎn)足 Web Excel 組件開(kāi)發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類(lèi)報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

獲取SpreadJS最新正式版下載

SpreadJS 是純前端的，可以和Chrome擴(kuò)展插件完美結(jié)合，輕松地把Excel的能力集成到Chrome中，實(shí)現(xiàn)效果驚人的插件應(yīng)用。接下來(lái)咱們就花30分鐘時(shí)間，一起寫(xiě)一個(gè)展示待辦任務(wù)的瀏覽器插件（想獲取本文的完整Demo，請(qǐng)咨詢(xún)“”獲?。?

首先在package.json文件中引入SpreadJS相關(guān)依賴(lài)文件。

{

"dependencies": {

"\@grapecity/spread-excelio": "15.2.0",

"\@grapecity/spread-sheets": "15.2.0",

"\@grapecity/spread-sheets-resources-zh": "15.2.0"

}

}

其次創(chuàng)建SpreadJS容器。在manifest.json文件中，可以配置點(diǎn)擊插件圖標(biāo)時(shí)彈出的小窗口的頁(yè)面。這里配置了index.html頁(yè)面。

接著我們?cè)趇ndex.html中創(chuàng)建SpreadJS的目標(biāo)DOM元素：

<div id="ss" style="width: 99%; height: 430px;"></div>

 創(chuàng)建容器之后，就可以初始化SpreadJS了。在GC.Spread.Sheets.Workbook構(gòu)造函數(shù)中，有兩個(gè)參數(shù)。第一個(gè)參數(shù)是宿主dom元素或者id，這里是‘ss’。第二個(gè)參數(shù)是初始化選項(xiàng)。這里設(shè)置了三個(gè)值： sheetCount、scrollbarMaxAlign、newTabVisible；分別表示表單數(shù)量，滾動(dòng)條與活動(dòng)表單的最后一行和最后一列對(duì)齊，不顯示新增表單選項(xiàng)。

window.onload = function () {

var spread = new GC.Spread.Sheets.Workbook("ss",{ sheetCount: 1,
scrollbarMaxAlign:true, newTabVisible:false });

};

獲取SpreadJS對(duì)象后，就可以進(jìn)行綁定數(shù)據(jù)、進(jìn)行數(shù)據(jù)展示啦。首先可以為其綁定列，自定義表頭，根據(jù)列名設(shè)置寬度，根據(jù)內(nèi)容設(shè)置數(shù)據(jù)格式或者單元格類(lèi)型等。這時(shí)候可以定義帖子標(biāo)題，發(fā)帖時(shí)間，是否金牌用戶(hù)、地區(qū)等等信息。

var sheet = spread.getActiveSheet();

var colInfos = [

{name: "帖子標(biāo)題", displayName: "帖子標(biāo)題", size: 300},

{

name: "發(fā)帖時(shí)間",

displayName: "發(fā)帖時(shí)間",

size: 100,

formatter: "MM-dd hh:mm",

},

{

name: "city",

displayName: "地區(qū)",

cellType: ColorArea

},

];

sheet.autoGenerateColumns = false;

sheet.bindColumns(colInfos);

其次通過(guò)XMLHttpRequest獲取任務(wù)列表數(shù)據(jù)，獲取數(shù)據(jù)后，可以進(jìn)行表單數(shù)據(jù)綁定。

var xhr = new XMLHttpRequest();

xhr.open("GET",url,true);

xhr.onreadystatechange = function () {

> if (xhr.readyState == 4) {

> var resp = JSON.parse(xhr.responseText);

> if (resp instanceof Array) {

> sheet.setDataSource(resp);

> }

}}

xhr.send();

 綁定數(shù)據(jù)后還可以為其添加篩選、排序等功能。如為其篩選區(qū)域。如想查看北方區(qū)所有的論壇帖子，就可以在sheet表單第9列為其綁定篩選條件。

var condition =new GC.Spread.Sheets.ConditionalFormatting.Condition(

GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition,

{compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType .contains,

expected: "\*北方區(qū)\*",} );

sheet.rowFilter().addFilterItem(9, condition);

sheet.rowFilter().filter(9);

sheet.rowFilter().filterButtonVisible(true);

其結(jié)果如下圖所示：

根據(jù)條件規(guī)則設(shè)置樣式

sheet.conditionalFormats.addSpecificTextRule(

GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,

"未處理",style1,ranges);

sheet.conditionalFormats.addSpecificTextRule(

GC.Spread.Sheets.ConditionalFormatting.TextComparisonOperators.contains,

"處理中", style2,ranges);

 以上代碼分別為"未處理"與"處理中"賦值不同樣式。這樣子可以很醒目看到論壇帖子處理狀態(tài)。其結(jié)果如下所示：

利用SpreadJS可以導(dǎo)出Excel的特性，可以將當(dāng)前sheet導(dǎo)出到Excel中。

 在導(dǎo)出Excel前，要通過(guò)toJSON獲取其序列化數(shù)據(jù)。這時(shí)候要注意序列化選項(xiàng)：將includeBindingSource設(shè)置為true。

columnHeadersAsFrozenRows設(shè)置為true。

var serializationOption = {

includeBindingSource: true,

columnHeadersAsFrozenRows: true,

};

var json = spread.toJSON(serializationOption);

在序列化成功后，就可以導(dǎo)出到Excel文件啦。

var excelIo = new GC.Spread.Excel.IO();

excelIo.save( json,

function (blob) {

saveAs(blob, fileName);

},function (e) {

console.log(e);

}

);

說(shuō)完SpreadJS的一些功能，下面咱們介紹下Chrom插件吧。

Chrome插件，官方名稱(chēng)extensions（擴(kuò)展程序）；為了方便理解，以下都稱(chēng)為插件。

 我們開(kāi)發(fā)的插件需要在瀏覽器里面運(yùn)行，打開(kāi)瀏覽器，通過(guò)右上角的三個(gè)點(diǎn)（自定義及控制）-更多工具-拓展程序-打開(kāi)開(kāi)發(fā)者模式。點(diǎn)擊"加載已解壓的拓展程序，選擇項(xiàng)目文件夾，就可將開(kāi)發(fā)中的插件加載進(jìn)來(lái)。

 插件是基于Web技術(shù)構(gòu)建的，例如HTML、JavaScript和CSS。它們?cè)趩为?dú)的沙盒執(zhí)行環(huán)境中運(yùn)行并與Chrome瀏覽器進(jìn)行交互。插件允許我們通過(guò)使用API修改瀏覽器行為和訪問(wèn)Web內(nèi)容來(lái)擴(kuò)展和增強(qiáng)瀏覽器的功能。

 首先在manifest.json文件中進(jìn)行基礎(chǔ)配置，如icons可以配置插件圖標(biāo)，我們的插件安裝后，popup頁(yè)面也運(yùn)行了；但是我們也發(fā)現(xiàn)了，popup頁(yè)面只能做臨時(shí)性的交互操作，用完就關(guān)了，不能存儲(chǔ)信息或者和其他標(biāo)簽頁(yè)進(jìn)行交互等等；這時(shí)就需要用到background（后臺(tái)），它是一個(gè)常駐的頁(yè)面，它的生命周期是插件中所有類(lèi)型頁(yè)面中最長(zhǎng)的；這里設(shè)置background.js 用來(lái)作為后臺(tái)管理，處理通知等、刷新、徽章等數(shù)據(jù)。至于action配置之前也提到了，可以配置彈出頁(yè)面，最后的permissions可以配置權(quán)限。

基礎(chǔ)配置之后，就可以在background.js中來(lái)進(jìn)行我們的處理啦。

在插件安裝成功后，可以通過(guò)chrome.alarms這個(gè)api創(chuàng)建刷新時(shí)間與通知時(shí)間。

chrome.runtime.onInstalled.addListener(function () {

console.log("插件已被安裝");

chrome.storage.sync.get(["notiTime", "updateTime"], function (result) {

if (result && result.notiTime) {

var notiTime = parseFloat(result.notiTime);

if (notiTime \> 0) {

chrome.alarms.create("UserReplyTimer", { periodInMinutes: notiTime });

}

}

if (result && result.updateTime) {

var updateTime = parseFloat(result.updateTime);

if (updateTime \> 0) {

chrome.alarms.create("UpdateCountTimer", {

periodInMinutes: updateTime,

});

}

}

});

});

 當(dāng)刷新時(shí)間到，可以為其更改插件圖標(biāo)徽章中待處理帖子數(shù)量。使用chrome.actionAPI 控制 Google Chrome 工具欄中的擴(kuò)展程序圖標(biāo)。

chrome.action.setBadgeBackgroundColor({ color: "\#CCCCFF" });

chrome.action.setBadgeText({

text: unreadTopicCount \> 0 ? "" + unreadTopicCount : "",

});

其結(jié)果如下圖所示，還有17個(gè)帖子需要處理，提示自己加油呀！

 當(dāng)通知時(shí)間到，在電腦右下角可以彈窗瀏覽器通知，通知我們待辦數(shù)量。使用chrome.notificationsAPI 使用模板創(chuàng)建豐富的通知，并將這些通知顯示給系統(tǒng)托盤(pán)中的用戶(hù)。當(dāng)你的桌面不再停留在瀏覽器，或許你在處理郵件，或許你在編輯Excel。這時(shí)候系統(tǒng)發(fā)出的通知，會(huì)大大提高你的工作效率。

var options = {

type: "basic",

iconUrl: "img/icon.png",

title: "GCDN提醒",

message: "你關(guān)注的板塊有" + unreadTopicCount + "個(gè)帖子需要處理",

};

chrome.notifications.clear("UserReplyNotification");

chrome.notifications.create("UserReplyNotification", options);

其結(jié)果如下圖所示：

此外還可以選擇在瀏覽器選項(xiàng)卡中打開(kāi)任務(wù)列表。可以更清晰查看自己的待做事項(xiàng)。

 chrome.tabs.create({url: window.location.href});

至此，基礎(chǔ)谷歌插件的SpreadJS應(yīng)用就介紹到這里啦，快來(lái)開(kāi)發(fā)屬于自己的插件吧。

本文內(nèi)容源自