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

准备工作

本教程己经到了 Excel 示例的收尾阶段，掌握前期的内容，基本上可以完成一个 Excel Web add-in 插件了，但如果能够引入一些常用的控件库，能达到事半功倍的效果。这次我们将介绍一个可能会常用的控件库，颜色选择器，用于非常开发的功能。

使用颜色选择器突出显示单元格，可以采用一些现成的库，比如颜色选择器，使用Spectrum库（http://bgrins.github.io/spectrum/）来呈现颜色，用于选择单元格颜色。需要在 Libraries 中加入以下引用：

spectrum-colorpicker@1.8.0/spectrum.js
spectrum-colorpicker@1.8.0/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);
  }
}

Script Lab 01：快速 Office 365 开发工具

Script Lab 02：Script Lab，知识储备

Script Lab 03：Script Lab，启动函数，Excel 基础操作（1）

Script Lab 04：Script Lab，九九乘法表，Excel 基础操作（2）

Script Lab 05：Office JavaScript API助手，Excel 基础操作（3）

Script Lab 06：事件处理，Excel 基础操作（4）

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

Script Lab 08：单词“卡拉OK”，Word 基础操作

Script Lab 09：异步调用函数，PowerPoint 基础操作

Script Lab 10：为 Officejs 开发配置 VSCode 环境

Script Lab 11：OIfficeJS 的三种调试方式