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

(点击放大图像)

\\

22f2bf0ab4fed65f1b79ab341635f94e.jpg

\\

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 结构是这样的:

\\

(点击放大图像)

\\

afd33040a50fce946c2940aa223cddbc.jpg

\\

一个 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 的实例:

\\

(点击放大图像)

\\

25df4dec49fc600a0409daf4ca5338d7.jpg

\\

二、Word Template Helper 需求分析

\\

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

\\

Word 自带的模板是这样的:

\\

(点击放大图像)

\\

6da2900be78d1215d6777fa9d3b1fc37.jpg

\\

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

\\

(点击放大图像)

\\

e0b52b3f6e6969084cc73cb496b50d0e.jpg

\\

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

\\

三、项目架构

\\

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

\\

(点击放大图像)

\\

b8de3a52e56601ef0ff0f048480a6c87.jpg

\\

至于文档的实体 —— 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

\\

四、Web API 开发

\\
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值