在本练习中,你将学习如何使用 Office.js Excel JavaScript API 处理表格和图表。 创建表格后,你将学习如何对表格中的数据应用排序和筛选操作。 你还将学习如何使用自定义 Excel 加载项在工作簿中创建和编辑图表。
开发适用于 Microsoft Excel 的 Office 加载项需要 Excel 2016 版本 1711(内部版本 8730.1000 即点即用)或更高版本。 可能必须成为 Office 预览体验成员,才能获取此版本。 有关详细信息,请参阅成为 Office 预览体验成员。
在本模块中,你将使用 Node.js 创建自定义 Excel 加载项。 此模块中的练习假定你在开发者工作站上安装了以下工具。
- Node.js - (可用的 LTS 版本) 表格中
- npm(随 Node.js 一起安装)
- Yeoman - v4.x (或更高版本)
- 适用于 Microsoft Office 的 Yeoman 生成器 - v1.9.5
- Visual Studio Code
运行以下命令,使用 Yeoman 生成器创建加载项项目:
出现提示时,请提供以下信息以创建加载项项目:
- 选择项目类型: Office 加载项任务窗格项目
- 选择脚本类型:JavaScript
- 要如何命名加载项? 我的 Office 加载项
- 要支持哪一个 Office 客户端应用程序? Excel
完成向导后,更改为生成器创建的项目文件夹, (My Office 外接程序) ,并通过运行 npm 安装来安装 npm表格中 模块。
在此部分,以编程方式测试加载项是否支持用户的当前 Excel 版本,向工作表中添加表格,使用数据填充表格,并设置格式。
在代码编辑器中打开项目。
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.html 文件。 此文件含有任务窗格的 HTML 标记。
找到 元素并删除在开始 标记后和关闭 标记前出现的所有行。
打开 标记后立即添加下列标记:
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.js 文件。 此文件包含用于使任务窗格与 Office 托管应用程序之间交互的 Office JavaScript API 代码。
执行以下操作,删除对“运行”按钮和 函数的所有引用:
- 查找并删除行 。
- 查找并删除整个 函数。
在 方法调用中,找到行 并紧接着行添加下列代码:
将以下函数添加到文件末尾:
表格中在 函数中,将 替换为以下代码:
在 函数中,将 替换为以下代码:
在 函数中,将 替换为以下代码:
验证是否已保存了对项目所做的所有更改。
完成以下步骤,以启动本地 Web 服务器并旁加载你的加载项。
若要在 Excel 中测试加载项,请在项目的根目录中运行以下命令。 这将启动本地的 Web 服务器 (如果尚未运行的话), 并使用加载的加载项打开 Excel。
若要在 Excel 网页版中测试加载项,请在项目的根目录中运行以下命令。 运行此命令时,本地 Web 服务器将启动(如果尚未运行)。
若要使用加载项,请在 Excel 网页版中打开新的文档,并按照在 Office 网页版中旁加载 Office 加载项中的说明操作,以旁加载你的加载项。
在 Excel 中,选择“主页”选项卡,然后选择功能区中的“显示任务窗格”按钮以打开加载项任务窗格。
在任务窗格中,选择“创建表格”按钮。
在此部分,筛选并排序之前创建的表格。
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.html 文件。
定位“创建表格”按钮的 元素,并在行后添加下列标记:
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.js 文件。
在 方法调用中,在 方法中找到以下行:
在这行代码后面紧接着添加以下代码:
将以下函数添加到文件末端:
在 函数中,将 替换为以下代码:
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.html 文件。
定位“筛选表格”按钮的 元素,并在行后添加下列标记:
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.js 文件。
在 方法调用中,在 方法中找到以下行:
在这行代码后面紧接着添加以下代码:
将以下函数添加到文件末端:
在 函数中,将 替换为以下代码:
验证是否已保存了对项目所做的所有更改。
如果本地 Web 服务器已在运行,并且加载项已载入到 Excel 中,请继续执行步骤 2。 否则,启动本地 Web 服务器并旁加载你的加载项:
若要在 Excel 中测试加载项,请在项目的根目录中运行以下命令。 这将启动本地的 Web 服务器 (如果尚未运行的话), 并使用加载的加载项打开 Excel。
若要在 Excel 网页版中测试加载项,请在项目的根目录中运行以下命令。 运行此命令时,本地 Web 服务器将启动(如果尚未运行)。
若要使用加载项,请在 Excel 网页版中打开新的文档,并按照在 Office 网页版中旁加载 Office 加载项中的说明操作,以旁加载你的加载项。
如果加载项任务窗格尚未在 Excel 中打开,请转到“ 开始 ”选项卡,然后选择功能区中的“ 显示任务窗格 ”按钮将其打开。
如果之前在此教程中添加的表格未在打开的工作表中出现,请选择任务窗格中的“创建表格”按钮。
选择“筛选表格”按钮和“排序表格”按钮(按顺序和倒序中的任一顺序排序皆可)。
在此部分,你将使用先前创建的表格中的数据创建图表,再设置图表格式。
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.html 文件。
定位“排序表格”按钮的 元素,并在行后添加下列标记:
打开 https://docs.microsoft.com/zh-cn/learn/modules/office-add-ins-excel/src/taskpane/taskpane.js 文件。
在 方法调用中,在 方法中找到以下行:
在这行代码后面紧接着添加以下代码:
将以下函数添加到文件末端:
在 函数中,将 替换为以下代码。 为了排除标题行,此代码使用 方法(而不是 方法)获取要绘制成图表的数据的范围。
在 函数中,将 替换为以下代码:
在 函数中,将 替换为以下代码。 此代码的大部分内容非常直观明了:
验证是否已保存了对项目所做的所有更改。
如果本地 Web 服务器已在运行,并且加载项已载入到 Excel 中,请继续执行步骤 2。 否则,启动本地 Web 服务器并旁加载你的加载项:
若要在 Excel 中测试加载项,请在项目的根目录中运行以下命令。 这将启动本地的 Web 服务器 (如果尚未运行的话), 并使用加载的加载项打开 Excel。
若要在 Excel 网页版中测试加载项,请在项目的根目录中运行以下命令。 运行此命令时,本地 Web 服务器将启动(如果尚未运行)。
若要使用加载项,请在 Excel 网页版中打开新的文档,并按照在 Office 网页版中旁加载 Office 加载项中的说明操作,以旁加载你的加载项。
如果加载项任务窗格尚未在 Excel 中打开,请转到“ 开始 ”选项卡,然后选择功能区中的“ 显示任务窗格 ”按钮将其打开。
如果之前在此教程中添加的表格未在打开的工作表中出现,请选择任务窗格中的“创建表格”按钮,然后选择“筛选表格”按钮和“排序表格”按钮(按顺序和倒序中的任一顺序排序皆可)。
选择“创建图表”按钮。 此时,图表创建完成,其中仅包含筛选出的行中的数据。 底部数据点上的标签按图表的排序顺序进行排序,即按商家名称的字母倒序排序。
在本练习中,你学习了如何使用 Office.js Excel JavaScript API 处理表格和图表。 创建表格后,你学习了如何对表格中的数据应用排序和筛选操作。 你还学习了如何使用自定义 Excel 加载项在工作簿中创建和编辑图表。