使用 Vue 生成 Excel 任务窗格加载项
本文将逐步介绍如何使用 Vue 和 Excel JavaScript API 生成 Excel 任务加载项。
先决条件
Node.js(最新LTS 版本)。 访问 Node.js 站点 ,下载并安装适合你的操作系统的版本。
最新版本的 Yeoman 和适用于 Office 加载项的 Yeoman 生成器。若要全局安装这些工具,请从命令提示符处运行以下命令。
npm install -g yo generator-office
注意
即便先前已安装了 Yeoman 生成器,我们还是建议你通过 npm 将包更新为最新版本。
已连接到 Microsoft 365 订阅的 Office (包括 Office 网页版)。
注意
如果你还没有 Office,你可能有资格通过 Microsoft 365 开发人员计划获得Microsoft 365 E5开发人员订阅;有关详细信息,请参阅常见问题解答。 或者,可以 注册 1 个月的免费试用版 或 购买 Microsoft 365 计划。
全局安装 Vue CLI。 在终端运行以下命令。
npm install -g @vue/cli
生成新 Vue 应用
若要生成新的 Vue 应用,请使用 Vue CLI。
vue create my-add-in
然后,选择Default
预设"Vue 3"(如果愿意,请选择"Vue 2")。
生成清单文件
每个加载项都需要定义自己设置和功能的清单文件。
转到应用程序文件夹。
cd my-add-in
使用 Yeoman 生成器生成加载项清单文件。
yo office
注意
运行该
yo office
命令时,可能会收到有关 Yeoman 和 Office 加载项 CLI 工具的数据收集策略的提示。 根据需要,使用提供的信息来响应提示。 如果在对第二条提示的响应中选择“退出”,则在准备好创建加载项项目时,需要再次运行yo office
命令。出现提示时,请提供以下信息以创建加载项项目。
- 选择项目类型:
Office Add-in project containing the manifest only
- 要为外接程序命名什么名称?
My Office Add-in
- 你希望支持哪个 Office 客户端应用程序?
Excel
- 选择项目类型:
完成后,向导创建一个 My Office 加载项文件夹,其中包含一个 manifest.xml 文件。 使用该清单旁加载和测试加载项。
提示
创建加载项项目后,可忽略 Yeoman 生成器提供的后续步骤指南。 本文中的分步说明提供了完成本教程所需的全部指南。
保护应用
强烈建议对加载项使用 HTTPS 终结点(尽管无需在所有加载项方案中都严格遵循此要求)。 不受 SSL (HTTPS) 保护的加载项会在使用期间生成不安全的内容警告和错误。 如果计划在 Office web 版 中运行加载项或将外接程序发布到 AppSource,则它必须受到 SSL 保护。 如果加载项访问外部数据和服务,它应受 SSL 保护,以保护传输中的数据。 自签名证书可用于开发和测试,但前提是证书在本地计算机上受信任。
为应用启用 HTTPS。 在 Vue 项目的根文件夹中,创建包含以下内容的 vue.config.js 文件。
const fs = require("fs"); const path = require("path"); const homedir = require('os').homedir() module.exports = { devServer: { port: 3000, https: { key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)), cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)), ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)), } } }
安装加载项的证书。
npx office-addin-dev-certs install
浏览项目
使用 Yeoman 生成器创建的加载项项目,包含适合于基础任务窗格加载项的示例代码。 如果想要浏览加载项项目的主要组件,请在代码编辑器中打开项目并检查下面列出的文件。 准备好试用加载项时,请转至下一部分。
- 项目根目录中的 manifest.xml 文件定义加载项的设置和功能。 有关 manifest.xml 文件的详细信息,请参阅 Office 外接程序 XML 清单。
- ./src/App.vue文件包含任务窗格的 HTML 标记、应用于任务窗格中内容的 CSS,以及有助于在任务窗格和 Excel 之间进行交互的 Office JavaScript API 代码。
更新应用
打开./public/index.html 文件,并在
</head>
标记前面添加以下<script>
标记。<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
打开 manifest.xml 并找到
<bt:Urls>
Resources> 标记内的<标记。 找到 ID 为Taskpane.Url
的<bt:Url>
标记,并更新其DefaultValue
属性。 新DefaultValue
是https://localhost:3000/index.html
。 整个更新后的标记应与以下行匹配。<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html" />
打开 ./src/main.js 并将内容替换为以下代码。
import { createApp } from 'vue' import App from './App.vue' window.Office.onReady(() => { createApp(App).mount('#app'); });
打开 ./src/App.vue ,并将文件内容替换为以下代码。
<template> <div id="app"> <div class="content"> <div class="content-header"> <div class="padding"> <h1>Welcome</h1> </div> </div> <div class="content-main"> <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 @click="onSetColor">Set color</button> </div> </div> </div> </div> </template> <script> export default { name: 'App', methods: { onSetColor() { window.Excel.run(async context => { const range = context.workbook.getSelectedRange(); range.format.fill.color = 'green'; await context.sync(); }); } } }; </script> <style> .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; } </style>
启动开发人员服务器
启动开发人员服务器。
npm run serve
在 Web 浏览器中,导航到
https://localhost:3000
(请注意https
)。 如果https://localhost:3000
上的页面空白,并且没有任何证书错误,则表示正常工作。 Office 初始化后装载 Vue 应用,因此它仅显示 Excel 环境中的内容。
试用
在 Excel 中运行加载项并旁加载加载项。 请按照所用平台对应的说明操作:
- Windows:在 Windows 上旁加载 Office 加载项
- Web 浏览器:将 Office 加载项旁加载到Office web 版
- iPad:在 iPad 上旁加载 Office 加载项
- Mac:在 Mac 上旁加载 Office 加载项
在 Excel 中打开加载项任务窗格。 在“主页”选项卡上,选择“显示任务窗格”按钮。
选择工作表中的任何一系列单元格。
将选定区域的颜色设置为绿色。 在外接程序的任务窗格中,选择“设置颜色”按钮。
后续步骤
祝贺,你已使用 Vue 成功创建了 Excel 任务窗格加载项! 接下来,请详细了解 Excel 加载项功能,并跟着 Excel 加载项教程一起操作,生成更复杂的加载项。
疑难解答
按照设置开发环境中的说明,确保环境已准备好进行 Office 开发。
Yo Office 执行的自动
npm install
步骤可能会失败。 如果在尝试运行npm start
时看到错误,请在命令提示符中导航到新创建的项目文件夹并手动运行npm install
。 有关 Yo Office 的详细信息,请参阅 使用 Yeoman 生成器创建 Office 外接程序项目。如果外接程序显示错误 (例如“无法启动此加载项”。关闭此对话框以忽略问题,或单击“重启”重试。) 按 F5 或选择“在Visual Studio 中调试>开始调试”时,请参阅在 Visual Studio 中调试 Office 加载项了解其他调试选项。
一些示例代码使用 ES6 JavaScript。 这与 使用 Trident (Internet Explorer 11) 浏览器引擎的旧版 Office 不兼容。 有关如何在外接程序中支持这些平台的信息,请参阅 支持较旧的 Microsoft Webviews 和 Office 版本。 如果你还没有用于开发的 Microsoft 365 订阅,你可能有资格通过 Microsoft 365 开发人员计划获得Microsoft 365 E5开发人员订阅;有关详细信息,请参阅常见问题解答。 或者,可以 注册 1 个月的免费试用版 或 购买 Microsoft 365 计划。
另请参阅
反馈
https://aka.ms/ContentUserFeedback。
即将发布:在整个 2024 年,我们将逐步淘汰作为内容反馈机制的“GitHub 问题”,并将其取代为新的反馈系统。 有关详细信息,请参阅:提交和查看相关反馈