Skip to main content

Excel病特效藥:Office JavaScript API

· 5 min read
戈頓
Developer & Co-founder of Tecky Academy

有留意本站博客的朋友,可能看過有一種病叫Excel病這篇文章,都知道筆者絕不贊同亂用Excel作程式用途,因為Excel本身作為試算表,最適合作財務計算,或以數據生成圖表等功用。作為程式用途,則困難重重,舉一簡單例子,要在Javascript,顯示出1至10000的所有數字,是一個編程ABC的問題,程式初哥亦能輕易解決。

for (let i = 0; i <= 10000; i++) {
console.log(i);
}

要在Excel顯示出一萬個數字,則別無他法,需要一萬行去表達。

Excel Loop 10000

以上的JavaScript運用了迴圈(Loop)的概念,迴圈是基本的程式知識,乃程式設計師寫程式時必備工具,可是Excel卻因本質所限,無法輕易處理。

同樣道理,即使Excel本身支援的IF函數,比起JavaScript,都是乏善足陳。

JavaScript的例子:

if (number === 0) {
console.log('Number is zero');
} else if (number % 2 === 0) {
console.log('Number is even');
} else {
console.log('Number is odd');
}

Excel的例子:

Excel if else

堆在一起的方程式=IF(A1=0,"Number is Zero",IF(ISEVEN(A1),"Number is Even","Number is Odd")),對程式設計師來說簡直是折磨,亦因此造就了很多「Write Only」的Excel檔案,此等問題,正是上次Excel病一文所討論的病灶所在。

Excel JavaScript API

Excel 2016開始,微軟引入了Excel JavaScript API,容許用戶可以在Excel裏面直接使用JavaScript, 將Excel融合JavaScript,正正就可以取JavaScript之長,補Excel之短,令Excel功能更完整。

Excel JavaScript API 可以使用一個名為Script Lab的Addon幫助開發。要安裝Script Lab,可以在以下頁面下載:

Script lab

再選擇open in Excel

Script lab Excel

安裝好後,可以直接揀取Script Lab,然後按下Code,右邊就會開啟一個新的視窗,作編程之用。

New Snippet

再揀選New Snippet,然後就會出現幾個分頁,分別是HTMLJSCSS,安裝至此就大功告成!

Run Snippet

簡單例子

以下我們就做一個簡單的例子,志在顯示Excel加上JavaScript實在非常方便

HTML 中放入以下內容

<div class="padding">
<p>
Choose the button below to set the color of the selected range to green.
</p>
<br />
<h3>Try it out</h3>
<button class="ms-Button" id="set-color">Set color</button>
</div>

CSS中放入以下內容

#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
overflow: hidden;
}

#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}

.padding {
padding: 15px;
}

在Script中,放入以下內容

'use strict';

(function () {
Office.onReady(function () {
// Office is ready
$(document).ready(function () {
// The document is ready
$('#set-color').click(setColor);
});
});

function setColor() {
Excel.run(function (context) {
var range = context.workbook.getSelectedRange();
range.format.fill.color = 'green';

return context.sync();
}).catch(function (error) {
console.log('Error: ' + error);
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();

隨著你貼上代碼,右邊畫面亦即時顯示最新的內容。 貼上後,隨便選擇一片範圍,按下setColor按鈕,整片範圍的底色就馬上變為綠色!!

Set Color Example

總結

Excel JavaScript API的威力當然遠不至於此,想瞭解更多?歡迎參加科啟學院與Wave Academy合辦的**Tecky Academy x Wave Academy : 新世代Excel - AI及Programming上手工具**,屆時將有科啟學院的多位導師即場示範,座位有限,欲報從速!

Excel Workshop