准备工作
本教程己经到了 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); } }