Script Lab 07：引入控件，Excel 基礎操作（5）

準備工作

本教程己經到了 Excel 示例的收尾階段，掌握前期的内容，基本上可以完成一個 Excel Web add-in 插件了，但如果能夠引入一些常用的控件庫，能達到事半功倍的效果。這次我們将介紹一個可能會常用的控件庫，顔色選擇器，用于非常開發的功能。

使用顔色選擇器突出顯示單元格，可以采用一些現成的庫，比如顔色選擇器，使用Spectrum庫（

http://bgrins.github.io/spectrum/

）來呈現顔色，用于選擇單元格顔色。需要在 Libraries 中加入以下引用：

[email protected]/[email protected]/spectrum.css

效果如下：

代碼

【取色】

核心代碼為：

$("#colorpicker").spectrum("get").toHexString;

$("#colorpicker").spectrum
(
 { 
 color: "#f00"
 }
);

$("#run").click(run);

async function run 
{ 
 try 
 { 
 await Excel.run(async (context) => { 
 const range = context.workbook.getSelectedRange; 
 range.format.fill.color = $("#colorpicker") .spectrum("get") .toHexString;
 range.load("address"); 

 await context.sync; 
 console.log(`The range address was "${range.address}".`);
 }); 
 }
 catch (error) 
 { 
 OfficeHelpers.UI.notify(error); 
 OfficeHelpers.Utilities.log(error); 
 }
}