开发一个全功能的 Word Add-in

最新推荐文章于 2024-05-01 19:53:22 发布

weixin_33704234

最新推荐文章于 2024-05-01 19:53:22 发布

阅读量662

点赞数

文章标签：数据库前端 ui ViewUI

本文链接：https://blog.csdn.net/weixin_33704234/article/details/89149923

版权

本文详细介绍了如何开发一个全功能的 Word Add-in，包括需求分析、项目架构、Web API 开发和 Word Add-in 的实际开发过程。通过使用前端技术与Web API结合，实现了模板管理和应用功能。文章适合熟悉前端开发的读者，特别是对Office 365应用开发感兴趣的开发者。

摘要由CSDN通过智能技术生成

(点击放大图像)

2016 年 10 月我参加了在北京举行的 DevDays Asia 2016 - Office 365 应用开发 “48 小时黑客马拉松 ”，我开发的一个 Word Add-in Demo —— WordTemplateHelper 获得了二等奖。在会场有幸结识了陈希章老师，在与陈老师的交流中受益良多，得知陈老师在准备一个 Office 解决方案系列后，我想把这个 Demo 的开发过程简要介绍给大家，以支持陈老师的无私奉献，也希望更多的开发者参与到 Office 365 的开发中来。

Office 相关开发主要可以参考这个地址：https://dev.office.com/getting-started

本篇文章主要介绍其中的 Office 加载项开发.

注意：文中网址均不支持点击跳转，请单击文末 阅读原文 以更好地查看相关代码。

一、什么是 Office Add-ins

什么是 Office Add-ins 呢？在陈老师这两篇文章中：

Office 365 开发概述及生态环境介绍（一）

Office 365 开发概述及生态环境介绍（二）

已经对整个 Office 发展历史都进行了梳理。我个人的理解是，开发者可以在 Office 提供的平台上，对 Office 做出一定的扩展以实现各种功能，比如之前录制的宏，写的 VBS 的脚本，某种意义上都可以看做是 Office 的 Add-ins。当然这只是个人理解，不一定准确。目前的 Office Add-ins 只支持 Office 2013 以后的版本，开发方式也和以前的 VBS 有了很大的区别。

现在的 Office Add-ins 结构是这样的：

(点击放大图像)

一个 Office Add-in 其实是一个 Web App，可以将其部署在任意位置，它可以在一个 Office 应用程序中运行。有一个 manifest.xml 清单文件用来指定该 Web App 如何来呈现，包括定义 Web App 的 URL。当 Office 加载这个 Add-in 时，实际上是提供了一个浏览器的环境，来运行指定的 Web App。也就是说，现在开发一个 Office Add-in，其实跟开发网页程序差不多，这对熟悉 html+JavaScript+css 的前端开发人员是非常容易上手的。微软提供了丰富的 JavaScript API 来对 Office 进行操作，能实现什么就取决于开发者的想象力了。

一个 Word Add-in 的实例：

(点击放大图像)

二、Word Template Helper 需求分析

我在得知有这个活动时，并没有想好要做什么。一直到坐上赴京的高铁，才慢慢有了一个想法，这个想法也是来自平时的工作需要。在工作中经常要撰写大量的文档，如各种软件需求规格说明书、公函、文书、操作手册等，这些文档都有规定的格式。一般情况下我是将一些已经写好的 Word 文档保存在一个文件夹里当做模板，下次写这种文档的时候复制一份，删删减减的再改。为何不自己写个程序，将这些具有固定模式的文档作为 Word 模板呢？虽然 Word 也有自己的模板，但实际上是非常有限的，并不能完全满足我们的需要。如果这个功能做成一个模板商店，大家可以自由上传、分享各自的模板，也许会方便许多。

Word 自带的模板是这样的：

(点击放大图像)

这些通用模板对专业性比较强的工作来说是远远不够的。Word Template Helper 的效果是这样的：

(点击放大图像)

主意有了，那么就来看一下如何实现。我参加活动时的项目托管在码云上，为了写这篇文章我重新梳理了这个小 demo，在 Github 上建了一个项目，并尝试使用最新的. NET Core 来实现后台 API 部分。接下来就跟我一起动手吧。

三、项目架构

首先分析一下该项目的结构。文档的模板数据，如模板标题、属性等，需要保存在数据库里，还需要一个 Web API 项目提供数据，Office Add-in 为一个纯前端项目，使用 Angular2 框架，采用异步调用 Web API 的数据，实现搜索、加载模板等功能。插件的 UI 使用微软提供的 Fabric UI。整个项目的技术栈如下所示：

(点击放大图像)

至于文档的实体 —— Word 文档，是以 Word 格式文件存储还是直接保存在数据库中呢？如果是正式项目的话，当然是保存在云存储中是最合适的，但对于一个 sample 来说，直接保存在数据库中也未尝不可。因为是参加开发马拉松，怎么快怎么来吧。包括 ORM 框架也是，只是为了快速实现采用的方式，不是最佳实践。

这个 Sample 的开发环境配置如下：

Windows 10 x64,

VS 2017（请确保安装了 Office 开发工具）

VS Code

Node.js v7.10.0

NPM v4.2.0

ASP.NET Core 1.1