支付1个全职能的Word,开发简介

201陆年七月自笔者参预了在京城实行的DevDays
Asia 201陆 – Office
36伍行使开发”48钟头黑客马拉松“
,笔者付出的1个Word
Add-In
德姆o——WordTemplateHelper获得了二等奖。在会场有幸结识了陈希章先生,在与陈老师的调换中收益良多,得知陈老师在准备一个Office消除方案体系后,作者想把这几个德姆o的开销进度不难介绍给我们,以支撑陈先生的无私进献,也希望越多的开发者插手到Office3陆5的支付中来。

作者:陈希章 发表于 2017年12月22日

Office相关开发关键能够参考这一个地点:https://dev.office.com/getting-started


再谈SharePoint大局观
中自个儿提到了SharePoint开发的局部新的变更,这一篇小说小编将教师SharePoint
Add-in开发。其实早在20一3年本身也写过这上面的稿子,有趣味的朋友能够参见

本篇文章首要介绍当中的Office加载项支出,即Office
Add-ins:https://msdn.microsoft.com/ZH-CN/library/office/jj220082.aspx

  1. SharePoint Server
    20壹三支出之旅(一):新的付出平台和超级开发处境介绍
  2. SharePoint Server
    20一三支付之旅(二):使用在线的开发人士网址开始展览SharePoint
    App开发
  3. SharePoint Server 201叁花费之旅(三):为SharePoint
    Server配置App开发、布署、管理条件

 

明日再回过去看这一个小说,绝大多数的知识只怕能够运用的。只不过,第2篇中关系的Napa这些在线的工具以往不再提供了。现在的开发工具重要有Visual
Studio 和 Visual Studio Code。

一、什么是Office Add-Ins

哪些是Office
Add-ins呢?在陈先生的上1篇文章中,对一切Office发展历史都进展了梳头,作者个人的领会正是,开发者可以在Office提供的阳台上,对Office做出肯定的恢弘以促成各类功能,比如事先录像的宏,写的VBS的剧本,某种意义上都足以看做是Office的Add-ins。当然那只是个体知道,不自然标准。如今的Office
Add-Ins只帮衬Office201三自此的本子,开发方式也和原先的VBS有了相当的大的区分。

最近的Office Add-ins结构是这么的:

图片 1

3个Office Add-in其实是四个Web
App,能够将其配备在任意地点,它可以在二个Office应用程序中运作。有三个manifest.xml清单文件用来钦定该Web
App如何来表现,包罗定义Web App
的U途锐L。当Office加载那么些Add-in时,实际上是提供了2个浏览器的环境,来运作钦点的Web
App。也正是说,今后开发一个Office
Add-in,其实跟开发网页程序差不离,那对熟习html+JavaScript+css的前端开发职员是11分容易上手的。微软提供了增进的JavaScript
API来对Office举行操作,能实现怎么着就取决于开发者的想象力了。

一个Word Add-In的实例:

图片 2

 

值得说的是,以后规定下来的SharePoint
Add-in对应的是20一三年这会儿说的SharePoint App,而近来SharePoint
App是另有所指。小编清楚您早就晕掉了,但本人盼望咱们不用纠结那几个名字的难题,或许您能够简不难单地将她们知道为同样也并未有涉及。

2、Word Template Helper需要分析

自家在意识到有其壹活动时,并从未想好要做怎么样,平素到坐上赴京的火车,才逐步有了八个想法,那一个想法也是来源于平常的办事索要。在工作中平常要编写大批量的文书档案,如种种软件供给原则表达书、公函、文书、操作手册等,那一个文书档案都有规定的格式,壹般景观下自个儿是将1些早已写好的Word文书档案保存在2个文书夹里当做模板,下次写这种文书档案的时候复制一份,删删减减的再改。为什么不团结写个程序,将这一个全体一定格局的文书档案作为Word模板呢?尽管Word也有协调的模板,但实质上是非常简单的,并无法完全满足大家的急需。如若这么些成效做成三个模板商店,大家能够自由上传、分享各自的沙盘,恐怕会便宜广大。

Word自带的沙盘是那般的:

图片 3

那几个通用模板对专业性相比较强的干活以来是远远不够的。Word
Template Helper的效益是那样的:

图片 4图片 5图片 6

意见有了,那么就来看一下怎么促成。作者参与活动时的门类托管在码云上,为了写那篇文章,小编再也梳理了那一个小demo,在Github上建了三个品种,并尝试运用新型的.NET
Core来完结后台API部分。接下来就跟小编1同入手吧。

SharePoint Add-in开发概述

用作SharePoint
Add-in的定点的话,它是用来给SharePoint提供扩充性的功用的。例如扩展1个WebPart,列表,只怕自定义二个工作流等等,你的Add-in也得以是贰个全然独立的选用,在这之中会调用到SharePoint的API去完毕某种程度的三合1。

自小编明白许三人会以为SharePoint其实很强劲了,难道还有啥须求大家去扩充它的呢?这几个嘛,取决于你是否真正有深度应用SharePoint吧。我们得以看一下脚下早就昭示到Office
Store中的SharePoint Add-in有哪部分吗。近期有120捌个Add-in

图片 7

至于SharePoint Add-in的详尽介绍,有趣味能够参考
https://docs.microsoft.com/zh-cn/sharepoint/dev/sp-add-ins/sharepoint-add-ins,小编那里给大家提出的是:SharePoint
Add-in分为两类:

  1. SharePoint本人托管的,应用的内容(网页,脚本)直接托管在SharePoint里面,无需协调创办网址。
  2. 提供商托管的,应用是2个单独的网站,可以透过投机喜欢的法子开始展览布局。

她们的不同如下

图片 8

正文的末段会通超过实际例飞快地分别创造那三种Add-in。

③、项目架构

先是分析一下该品种的结构。文书档案的模版数据,如模板标题、属性等,必要保留在数据Curry,还索要一个Web
API项目提供数据,Office
Add-in为2个纯前端项目,使用Angular二框架,选择异步调用Web
API的多少,达成搜索、加载模板等功效。插件的UI使用微软提供的法布里c
UI。整个项目标技艺栈如下所示:

图片 9

有关文档的实体——Word文书档案,是以Word格式文件存款和储蓄依旧一贯保存在数据库中吗?若是是正规项目来说,当然是保留在云存款和储蓄中是最合适的,但对于二个sample来说,直接保存在数据库中也未尝不可。因为是在座开发马拉松,怎么快怎么来吗。包涵OLacrosseM框架也是,只是为了火速达成采纳的点子,不是最棒实践。

以此sample的开支环境安排如下:

Windows 10 x64,

VS
2017(请确认保证卫安全装了Office开发工具)

VS Code

Node.js v7.10.0

NPM v4.2.0

ASP.NET Core 1.1

 

设置开发条件

付出SharePoint
Online的Add-in,只须要在客户端机器上设置开发工具即可,无需再设置服务器组件。开发工具我最推荐依然Visual
Studio 201七。

Visual Studio 20一柒中置放了Office 3陆5城门失火的开发工具

图片 10

姣好安装后,你能够创建项目时一贯运用有关的沙盘

图片 11

四、Web API开发

VS20一柒已经正式公布了,我利用最新的.NET
Core来达成Web API层。

开创SharePoint Developer Site(开发者站点)

上面提到了本地开发工具的设置,为了有利于你的开发和配置测试工作。你还索要在SharePoint
Online下边创造1个耗费站点。为了拓展那一个操作,你需求拥有Office 365全局管理员只怕SharePoint Online管理员的权柄。

若果您还平昔不Office 3陆5的条件,请参考
那篇小说
的印证申请二个时间限制一年的开发者环境。

你需求登6到SharePoint 管理骨干,创建1个“私人网址集”

图片 12

其一网站成立后大约是上边那样的

图片 13

请留意,开发者网址能够创设多少个。

一.新建项目

新建2个空荡荡化解方案,命名称叫WordTemplateHelpe,然后在内部添加多个ASP.NET
Core项目:

图片 14

选择Web API:

图片 15

创造SharePoint App Catalog Site(应用程序目录站点)

假设你有了开发者网址,你能够协调开始展览开发、测试和调节和测试。但倘若你真正必要在商店里面让任何同事也能运用你付出的Add-in,则须要将你的战果发布到SharePoint
Online。大家得以经过创办应用程序目录站点来促成这么些必要。可是,应用程序目录站点的创始分裂于一般的站点,而且它在1个Office
3六五的租户中只能创设多个。

图片 16

假定是第二回操作,则能够进入上边包车型地铁界面

图片 17

点击“明确”后跻身详细布置页面

图片 18

本条网站看起来是上边那样的

图片 19

2.安装EF Core

在nuget管理器中寻找安装一下多少个Nuget包:

Microsoft.EntityFrameworkCore.SqlServer:EF
Core SQL Server

Microsoft.EntityFrameworkCore.Tools:EF命令行工具

Microsoft.EntityFrameworkCore.Tools.DotNet:EF
Core命令行工具

图片 20

开创、测试和配置SharePoint-hosted Add-in

万事俱备,未来就足以伊始SharePoint Online的Add-in的支付了。

首先步,通过Visual Studio创制项目

图片 21

其次步,输入支付站点的不二秘籍,并且选取Add-in的品种

图片 22

点击“下一步”时须求展开身份认证,请提供有权力登录到支付站点的用户名和密码,然后选择“SharePoint
Online”

图片 23

点击“实现”,那些向导会生成项指标构造和剧情

图片 24

这些连串利用了ASP.NET的技能来兑现网页(default.aspx),并且有三个app.js文件动态读取当前SharePoint的用户名,并且展现在页面上。

图片 25

为了拓展配置,项目中定义了一个效果(Feature),并且将其卷入在一个包(Package)里面。

图片 26

用作示范目标,小编那里不做其余轮代理公司码修改,选用品种文件夹,在右键菜单中选择“计划”,你恐怕会被需求再度输入账号和密码。接下来请小心在出口窗口的动态

------ 已启动生成: 项目: SharePointAddInSample-SelfHosted, 配置: Debug Any CPU ------
------ 已启动部署: 项目: SharePointAddInSample-SelfHosted, 配置: Debug Any CPU ------
活动部署配置: Deploy SharePoint Add-in
  由于未指定预先部署命令,将跳过部署步骤。
  正在跳过卸载步骤,因为服务器上未安装 SharePoint 外接程序。
  安装 SharePoint 外接程序:
  正在上载 SharePoint 外接程序...
  正在进行安装(00:00:05)
  外接程序已安装在 https://office365devlabs-1be72383c7171f.sharepoint.com/SharePointAddInSample-SelfHosted/ 中。
  已成功安装 SharePoint 外接程序。
  由于未指定后期部署命令,将跳过部署步骤。
========== 生成: 成功或最新 1 个,失败 0 个,跳过 0 个 ==========
========== 部署: 成功 1 个,失败 0 个,跳过 0 个 ==========

大家能够直接点击上边提到的叁个地址,查看一下这些Add-in运转的功效

图片 27

那么,如何在我们的站点中采取那一个Add-in呢?首先,你供给先对当下以此连串进展打包。

请在项目文件夹上边点击邮件,选取“发表”,然后点击 “打包外接程序”

图片 28

Visual Studio会在磁盘下面生成一个APP文件

图片 29

接下去你能够将这一个文件上传到开发者网站开始展览测试

图片 30

上传文件后点击“鲜明”

图片 31

点击“信任它”,然后要求拭目以俟一两分钟后,在网址的左侧导航区域中会出现刚才以此应用

图片 32

点击“SharePointAddinSample-SelfHosted”即可运营那一个应用

图片 33

要是我们愿旨在别的网址也能使用这几个动用,则须要先把那么些应用公布到“应用程序目录网址”中去。在左手选用“适用于SharePoint的应用程序”,然后点击
“上载”

图片 34

然后您的网站“添加应用程序”的时候,就能阅览那几个自定义应用

图片 35

然后选用“信任它”

图片 36

稍等片刻后,你也会在左边导航栏中观看一个新的使用链接(那个链接的文字你还足以点击“编辑链接”实行修改)

图片 37

点击链接后运转的意义如下

图片 38

到那边甘休,大家就全部成功了贰个最简单易行的“SharePoint托管Add-in”的成本和安顿进度。你恐怕会说,好像看起来界面不太美观嘛,成效也太单纯了(只是先试一下当下用户名)等等,确实是那般,但作为3个入门教程小编信任那早已够了。

要精晓,你在这些项目中还足以增加很多东西

图片 39

唯壹供给注意的是,那里的编制程序都以依照HTML和JavaScript的,不可能运用服务器代码(例如C#)和服务器对象模型。

3.建立Models

现阶段风行的EF都推荐应用Code
First形式,即间接写Model,EF框架会自行创造所需的数据库。如若习惯DB
First的话,也有1个很好的工具推荐:EntityFramework-Reverse-POCO-Code-First-Generator:https://visualstudiogallery.msdn.microsoft.com/ee4fcff9-0c4c-4179-afd9-7a2fb90f5838

 

能够一向在VS的恢宏与更新里下载。那一个工具得以很有益的依据数据库生成所需的实体类。

第一添加多个模板类型的枚举:

    /// <summary>
    /// 类型
    /// </summary>
    public enum TemplateType
    {
        /// <summary>
        /// Private
        /// </summary>
        [Description("Private")]
        Private = 0,
        /// <summary>
        /// Public
        /// </summary>
        [Description("Public")]
        Public = 1,
        /// <summary>
        /// Organization
        /// </summary>
        [Description("Organization")]
        Organization = 2,

    }

增加三个模板类:

    public class PrivateTemplateInfo
    {
        ///<summary>
        /// Id
        ///</summary>
        public string Id { get; set; }

        ///<summary>
        /// User Id
        ///</summary>
        public string UserId { get; set; }

        ///<summary>
        /// Template Id
        ///</summary>
        public string TemplateId { get; set; }

        ///<summary>
        /// Create Time
        ///</summary>
        public DateTime CreateTime { get; set; }
    }

 

因为还索要组织机关模板、用户收藏等多少个表,那里就不写了,可参看Github上的言传身教。

始建、测试和配置安顿Provider-hosted Add-in

下边再给大家非常快介绍一下“提供商托管的Add-in”的开发进度吧。首先,你在创制项目标时候选择“提供商托管”

图片 40

目的照旧选用“SharePoint Online”

图片 41

接下来,采用你要创设的Web应用项指标品类,推荐选用“ASP.NET MVC”

图片 42

布置身份验证选项,推荐用第二种

图片 43

创制好项目后,请留意那个化解方案中有七个档次了。第一个是SharePoint
Add-in项目,第一个是外部那些网址的品类。

图片 44

自个儿同1不做其余轮代理公司码修改直接开始展览安排的尝试。因为那个网址使用是所谓的提供商托管,所以小编必要团结去布置。作者那里选取的是Azure提供的PaaS服务来落成。

图片 45

点击“创造”按钮,Visual Studio会间接帮我安插

1>------ 已启动生成: 项目: SharePointAddIn2Web, 配置: Release Any CPU ------
1>  SharePointAddIn2Web -> C:\Users\xxxx\source\repos\SharePointAddIn2\SharePointAddIn2Web\bin\SharePointAddIn2Web.dll
2>------ 发布已启动: 项目: SharePointAddIn2Web, 配置: Release Any CPU ------
2>已使用 C:\Users\xxxx\source\repos\SharePointAddIn2\SharePointAddIn2Web\Web.Release.config 将 Web.config 转换为 obj\Release\TransformWebConfig\transformed\Web.config。
2>已将自动 ConnectionString Views\Web.config 转换为 obj\Release\CSAutoParameterize\transformed\Views\Web.config。
2>已将自动 ConnectionString obj\Release\TransformWebConfig\transformed\Web.config 转换为 obj\Release\CSAutoParameterize\transformed\Web.config。
2>正在将所有文件都复制到以下临时位置以进行打包/发布:
2>obj\Release\Package\PackageTmp。
2>启动 Web Deploy 以将应用程序/包发布到 https://sharepointaddinsample.scm.azurewebsites.net/msdeploy.axd?site=SharePointAddInSample...

2>发布成功。
2>Web 应用已成功发布 http://sharepointaddinsample.azurewebsites.net/
========== 生成: 成功 1 个,失败 0 个,最新 0 个,跳过 0 个 ==========
========== 发布: 成功 1 个,失败 0 个,跳过 0 个 ==========

接下去,有一个特别的布局,因为您的那一个网址是二个外部的,为了拿走授权,你供给依据下边包车型大巴印证注册三个客户端ID和密钥。

注册 SharePoint 加载项
2013

设就算在Visual
Studio中调剂,直接按下F五后,会动态变化三个客户端ID和密钥,并且自动修改好全体的音信。尽管必要为有个别租户创造客户端ID和密码,则要求用SharePoint管理员身份在有些SharePoint网址上边运转
_layouts/15/AppRegNew.aspx 那个页面。而一旦您的采纳是要揭橥到Office
Store,则还亟需专门在“商行面板”上面去登记。

自个儿曾经变化3个音信如下

图片 46

回到Visual
Studio中,修改Web.config文件和AppManifest.xml文件,然后采纳SharePoint
Add-in这一个项目文件夹,在右键菜单中选用“发表”

图片 47

点击“编辑”,然后输入刚才注册获得的音信

图片 48

点击“落成”后重临主界面,点击“打包外接程序”,请小心那里将Url改为https初叶

图片 49

假使壹切顺利的话,大家将收获2个应用程式文件

图片 50

设置成功后你会在左侧导航栏看到一个新的链接,点击之后会跳转到那么些页面

图片 51

若是我们研商一下那儿浏览器的地址,它实在是那样的
https://sharepointaddinsample.azurewebsites.net/?SPHostUrl=https://office365devlabs.sharepoint.com/sites/dev&SPLanguage=zh-CN&SPClientTag=0&SPProductNumber=16.0.7206.1208,所以实际上此时开拓的是实在的你协调的网址,可是会把有个别连锁的上下文音信传递过来。

只是,固然确实是一个独自的网址,在那个网址内部也照旧得以访问到SharePoint的能源的,全数的操作都是通过SharePoint的Client
API来落到实处的。上面是代码范例

[SharePointContextFilter]
public ActionResult Index()
{
    User spUser = null;

    var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

    using (var clientContext = spContext.CreateUserClientContextForSPHost())
    {
        if (clientContext != null)
        {
            spUser = clientContext.Web.CurrentUser;

            clientContext.Load(spUser, user => user.Title);

            clientContext.ExecuteQuery();

            ViewBag.UserName = spUser.Title;
        }
    }

    return View();
}
四.创设数据库上下文

有了Model后,需求钦点哪些实体包涵在数据模型中。添加1个Data文件夹,在内部创立八个名叫WordTemplateContext.cs的文书:

    public class WordTemplateContext:DbContext
    {
        public WordTemplateContext(DbContextOptions<WordTemplateContext> options) : base(options)
        {

        }

        public DbSet<WordTemplateInfo> WordTemplateInfoes { get; set; }
        public DbSet<UserFavoriteInfo> UserFavoriteInfoes { get; set; }
        public DbSet<PrivateTemplateInfo> PrivateTemplateInfoes { get; set; }
        public DbSet<OrganizationTemplateInfo> OrganizationTemplateInfoes { get; set; }

    }

 

那样就为各样实体创立了3个DbSet,对应数据库中的表,实体对应表中的行。

 

结语

本文完整地介绍了SharePoint
Add-in开发的三种方式,1种是SharePoint托管的,一种是提供商托管的。第三种不要求单独的安顿贰个网址,它不得不分包客户端脚本来实现定制,而且会以1个iframe的花样嵌入在SharePoint的网页中。第三种则能够由开发者自身安顿一个网址,通过在SharePoint上面注册多少个应用程序,来促成关系。那1种方法能够用更抓实大的服务器编制程序,但也足以经过客户端API访问到SharePoint在能源。

5.利用正视注入注册上下文

ASP.NET
Core暗中同意达成了正视注入。要把刚刚创制的WordTemplateContext注册成服务,需求在Startup.cs中添加以下代码:

        public void ConfigureServices(IServiceCollection services)
        {

            // Add framework services.
            services.AddDbContext<WordTemplateContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
            services.AddMvc();
        }

 

瞩目要添加using
Microsoft.EntityFrameworkCore;不然会找不到UseSqlServer方法。

数据库连接字符串在appsettings.json中陈设:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=.;User ID=sa;Password=12QWasZX;Initial Catalog=WordTemplate;"
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  }
}

 

此间运用了LocalDb,用于测试。当要求正式布署时,那里供给转移为行业内部数据库服务器的地方及用户名密码。

陆.先导化数据库

上边选择命令行初叶化数据库。在Data目录下新建多少个DbInitializer类,输入以下格局:

    public static class DbInitializer
    {
        public static void Initialize(WordTemplateContext context)
        {
            context.Database.EnsureCreated();

            //TODO
            context.SaveChanges();
        }
    }

 

 

担保数据被成立。然后修改Startup.cs文件中的Configure方法:

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, WordTemplateContext context)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

            app.UseMvc();
            DbInitializer.Initialize(context);
        }

 

 

7.创建API接口

当今写个Controller看看。在Controller文件夹中添加二个控制器:

图片 52

此地能够选择正视注入,将数据库上下文注入进来:

    [Produces("application/json")]
    [Route("api/WordTemplate/[action]")]
    public class WordTemplateController : Controller
    {
        private readonly WordTemplateContext _context;

        public WordTemplateController(WordTemplateContext context)
        {
            _context = context;
        }

 

咱俩以贰个找寻模板的api为例:

        [HttpGet]
        public async Task<ResponseResultInfo<List<WordTemplateInfo>>> SearchWordTemplateList(string keyword)
        {
            ResponseResultInfo<List<WordTemplateInfo>> respResult = new ResponseResultInfo<List<WordTemplateInfo>>();
            try
            {

                List<WordTemplateInfo> list = await _context.WordTemplateInfoes.Where(x => x.Type == TemplateType.Public && x.Name.Contains(keyword)).OrderByDescending(x => x.CreateTime).ToListAsync();
                respResult.IsSuccess = true;
                respResult.Result = list;
                return respResult;

            }
            catch (Exception ex)
            {
                //LogHelper.ErrorWriteLine("Something wrong. The exception message::{0}", ex);
                respResult.IsSuccess = false;
                respResult.Message = string.Format("Something wrong. The exception message::{0}", ex.Message);
                return respResult;
            }
        }

 

命令行转到品种目录,运转以下命令

dotnet run

 

能够运用前端调试利器Postman来测试:

图片 53

API项目周转的具体地址需求记一下,前边做Add-In的时候要用到。具体代码请参见Github。

捌.同意跨域访问

为了援助Add-in能够跨域访问大家的接口,还必要安装以下的库:

图片 54

下一场在Startup.cs的ConfigureServices方法中添加以下代码:

#region 跨域
            services.AddCors(options =>
            options.AddPolicy("AllowCrossDomain",
            builder => builder.WithOrigins().AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials())
            );

            #endregion

 

在急需跨域的WordTemplateController上添加1行:

[EnableCors("AllowCrossDomain ")]

 

如此那般api就能够协理跨域访问了。

 

五、Word Add-In开发

有了API,就足以付出Add-In部分了。开篇说起,Add-In实际上是一个Web
App,通过JavaScript操作Office文书档案对象,具体到这一个项目以来,正是采纳异步的js去查询、上传、搜索存在服务器上的沙盘文件,并动态的对当前Word文书档案举行操作。

微软在Github上开源了那么些JavaScript
API:https://github.com/OfficeDev/Office-js-docs_zh-cn/tree/staging,相关文书档案:https://msdn.microsoft.com/zh-cn/library/office/fp142185.aspx

支付步骤可参考:https://github.com/OfficeDev/Office-js-docs_zh-cn/blob/staging/docs/get-started/create-and-debug-office-add-ins-in-visual-studio.md

 

上面来开发Add-In部分。

1.新建Add-In项目

在解决方案上点击右键,添加三个Word
Web外接程序:

图片 55

添加实现后,多了四个项目:

图片 56

在那之中二个是清单文件,带Web后缀的正是Web
App了。

2.设置manifest.xml

清单文件是特别主要的贰个文本,描述加载项的有着安装。那一个文件是自动生成的,但须要大家手动修改部分地点。幸好文书中都有注释,所以修改还相比易于:

图片 57

最根本的是修改SourceLocation这几个节点,那个地方设置的是Web
App托管的岗位。在Web端开发并配备后,要将以此节点改为不易的职位才能揭穿。上边那个节点也要力戒。

图片 58

3.Web App分析

能够先运转一下那么些模板试试,直接F5:

图片 59

点击那里就能够调出这么些插件:

图片 60

 

会活动打开Word并加载那一个插件,文书档案中的文本就是插件插入的。那么是哪个地方的代码起效果的呢?

打开Home.js文件,找到如下代码:

    function loadSampleData() {
        // Run a batch operation against the Word object model.
        Word.run(function (context) {
            // Create a proxy object for the document body.
            var body = context.document.body;

            // Queue a commmand to clear the contents of the body.
            body.clear();
            // Queue a command to insert text into the end of the Word document body.
            body.insertText(
                "This is a sample text inserted in the document",
                Word.InsertLocation.end);

            // Synchronize the document state by executing the queued commands, and return a promise to indicate task completion.
            return context.sync();
        })
        .catch(errorHandler);
    }

 

 

这里的Word正是JavaScript
API提供的靶子,能够方便的对最近文书档案内容举行操作。那样思路就有了,能够因而JavaScript动态去调用Web
API获取查询结果,将查询到的文书档案内容插入到近来文书档案中,就兑现了中期的目的。同时还是能够将最近文档的始末保留为模板上盛传服务器上进行分享,四个完好意义的sample已经绘影绘声了。

4.使用Angular

小编们使用新型的Angular四来开发前端页面。当然假诺应用JQuery的话也足以,但未来已经有点out了不是吗?使用Angular能够长足支付四个MVVM架构的单页面WebApp,极度适合那个必要。

以此demo的有的代码参考微软开源的一个类型:https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns-Code

Angular上手曲线仍然有点陡的,官方给出了Angular
CLI工具,能够飞快搭建三个Angular应用。首先安装TypeScript:

npm install -g typescript

 

接下来安装Angular
CLI:https://github.com/angular/angular-cli

npm install -g @angular/cli

 

运维以下命令创造三个Angular项目:

ng new WordTemplateHelperSource

 

图片 61

然后使用cd WordTemplateHelperSource
命令转到项目目录,运转以下命令:

npm install

 

以此命令会安装ng项目所需的借助,要是设置不成事,提出切换来Taobaonpm镜像开始展览安装。

动用以下命令运转ng项目:

ng serve

 

能够在Chorme浏览器中浏览http://localhost:4200来查看效果:

图片 62

瞩目假使在IE中浏览是不正规的,这些难点大家到终极1节再付诸消除办法。

干什么不间接在WordTemplateHelperWeb建呢?因为Angular应用还要开始展览打包,会在项目目录下生成dist目录,那才是规范要运维的一对。所以等支付形成后,将转移的dist目录内的文件拷到WordTemplateHelperWeb就能够了。

在开发Angular的进度中,推荐应用VS
Code,对TypeScript和Angular的支撑都丰盛好。

因为本篇小说不是Angular的开销教程,所以Angular的切切实实知识那里就不开始展览详述了,感兴趣的话能够自动下载Github代码运转即可。

伍.添加操作Word文件的service

为了操作Word文件,大家须要将其封装成服务。使用以下命令添加1个service:

ng g service services\word-document\WordDocument

 

那般会在app目录中的相应路径中生成七个名称为WordDocument瑟维斯的服务。与此类似,生成别的的多少个service。在那之中最首要的多少个章程如下:

询问检索的诀要:

/**
     * search
     * 
     * @param {string} keyword
     * @returns {Promise<ResponseResultInfo<Array<WordTemplateInfo>>>}
     * 
     * @memberOf WordTemplateApiService
     */
    searchWordTemplateList(keyword: string): Promise<ResponseResultInfo<Array<WordTemplateInfo>>> {
        let url = `${AppGlobal.getInstance().server}/SearchWordTemplateList?keyword=${keyword}`;
        let promise = this.httpService.get4Json<ResponseResultInfo<Array<WordTemplateInfo>>>(url);
        return promise;
    }

 

如此能够取得服务器上囤积的文档模板,实际是以Ooxml格式保存的string。

对此这些sample来说,使用Office JavaScript
API并从未太难的事物,重要运用了四个方法:getOoxml()和insertOoxml(),前者可以读取当前word文书档案的Ooxml格式,后者能够设置当前word文书档案的Ooxml格式。Ooxml正是Office2007随后版本选择的格式,如docx那种。

原API提供的都以callback函数,为了使用方便小编将其封装成Promise:

/**
     * get the ooxml of the doc
     * 
     * 
     * @memberOf WordDocumentService
     */
    getOoxml() {
        // Run a batch operation against the Word object model.
        return Word.run(function (context) {

            // Create a proxy object for the document body.
            var body = context.document.body;

            // Queue a commmand to get the HTML contents of the body.
            var bodyOOXML = body.getOoxml();

            // Synchronize the document state by executing the queued commands, 
            // and return a promise to indicate task completion.
            // return context.sync().then(function () {
            //     console.log("Body HTML contents: " + bodyHTML.value);
            //     return bodyHTML.value;
            // });
            return context.sync().then(() => { return bodyOOXML.value });
        })
            .catch(function (error) {
                console.log("Error: " + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log("Debug info: " + JSON.stringify(error.debugInfo));
                }
                return "";
            });
    }

    /**
     * set the ooxml of the doc
     * 
     * @param {string} ooxml 
     * 
     * @memberOf WordDocumentService
     */
    setOoxml(ooxml: string) {
        // Run a batch operation against the Word object model.
        Word.run(function (context) {

            // Create a proxy object for the document body.
            var body = context.document.body;

            // Queue a commmand to insert OOXML in to the beginning of the body.
            body.insertOoxml(ooxml, Word.InsertLocation.replace);

            // Synchronize the document state by executing the queued commands, 
            // and return a promise to indicate task completion.
            return context.sync().then(function () {
                console.log('OOXML added to the beginning of the document body.');
            });
        })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
    }

 

当搜索到适合的模板后,能够单击按钮,调用setOoxml()方法,将其插入到如今word文书档案中:

applyTemplate(template: WordTemplateInfo) {
    this.wordDocument.setOoxml(template.TemplateContent);
  }

 

这么就做到了使用模板的功效。

 

固然要兑现将近来文书档案的内容保留为模板上流传服务器上,就能够调用getOoxml()方法获得当前文书档案的Ooxml格式文本,上传到服务器保存即可。至于别的的加为收藏、添加为机关模板、设置为个人模板等都以设置模板属性更新了,具体代码不再赘言。

再有有些内需专注的是,开发的时候,这里的服务器地址要写刚才我们开发的ASP.NET
Core的地址。

6.使用Fabric UI

对此三个Office
Add-in来说,具有简洁赏心悦目、与Office统一的UI是必须的。微软推荐应用法布里c
UI来完结统一的界面样式,详见:https://dev.office.com/fabric

那里提供了体制、图标、设计规范等众多财富,甚至还提供了React版的组件,纵然利用React开发的话一向拿来用就足以了。那个demo是平昔引用的style文件,配置在.angular-cli.json文件中:

图片 63

采取后就改为那样子:

图片 64

7.打包Add-in

刚才只是在三个新类型里开发了三个静态Web
App,还要将其包装,复制到WordTemplateHelperWeb项目中。使用ng build
–prod来打包Angular应用。打包后的文书会输出到dist目录下:

图片 65

专注还有三个索要专注的地点,假若仅这样打包的话,是不援救IE浏览器的,但Office
Add-In实际上内置的浏览器就是IE内核,所以我们需求做如下修改,找到src目录中的polyfills.ts文件,将下边部分的笺注打消:

图片 66

还要依照提醒,运转npm
install命令安装多少个必须的依靠。那样才能在IE种类浏览器中健康运营。再一次运维ng
build
–prod进行李包裹装。–prod参数的含义是以生产形式进行build,那样生成的代码容量更加小,运转速度越来越快。

将WordTemplateHelperWeb项目中的最初的小说件除了Web.config外,全体删减。把dist目录中的文件复制过来。

虽说本机开发时能够一向调试运行,但为了模仿真实的利用状态,大家把那几个Web
App也规范颁发一下。假设我们有Azure或其余主机的话就径直配备到服务器上,今后只用本机IIS来承载那个Web
App:

图片 67

那般该Add-In的地方正是:http://localhost/WordTemplateHelperWeb,

上面把api运维起来,进入WordTemplateHelperApi目录,运维dotnet
run命令:

图片 68

诸如此类API项指标地点是:http://localhost:5000/api/

那三个位置不要混淆。刚才在打包WebApp的时候也要小心,在common\app-global.ts文件中的api地址也要改成和骨子里api地址一样的才方可:

    /**
     * api url
     * 
     * @type {string}
     * @memberOf AppGlobal
     */
    public server: string = "http://localhost:5000/api/WordTemplate";

 

 

前几天打开WordTemplateHelperManifest清单文件,修改如下位置:

图片 69

图片 70

此地填的是Add-In的地址,一定不要搞错了。

六.周转测试

昨日得以重复运维Add-In项目了,将开行项目设置为WordTemplateHelper,运转:

图片 71

大家得以贴补二个模板,并上传来服务器上:

图片 72

点击Upload按钮即可将日前文书档案作为模板上流传服务器上分享。

图片 73

探寻到相应的沙盘后,点击apply按钮即可将模板内容插入到当前文书档案。

小编们得以寻找模板,添加本身的模版,并将模板内容应用到如今文书档案中。针对组织和个体还足以独家开始展览管制,笔者的设想是,这一个小插件能够做成两个模板商店之类的平台,用户能够4意的调换互相的文书档案模板,并得以收藏、添加到小编组织的模板库中等等。稍加扩充就能够做成多个行业内部产品了。

七.载入加载动画

在页面加载时得以加多少个载入提醒,使用户体验特别协调。具体代码可参看index.html中的css样式。

六、小结

那篇文章拖了很久,2018年的交锋,今年才把经过整理出来,实在很想对陈老师说一声抱歉^_^。Office
Add-In是3个比较新的开发世界,跟原先的开发格局有所不相同,但纯熟前端的同室能够火速进入这么些圈子,实际上就是写网页。这几个实例从后端接口到前台达成,是三个比较完好的种类,希望对Office开发有趣味的校友下载代码研商一下,开发出更为实用的Add-In。因为那些种类并未实际布置,所以并未有上传到集团中。下载代码的用户请勿用于商业用途。特此表明。

 

Github地址:https://github.com/yanxiaodi/WordTemplateHelper

 

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图