Office Web Add-in的技术原理和开发常见问题剖析

本文详细介绍了Office Web Add-in的适用场景、工作原理、开发中的常见问题及解决方案。强调了Web Add-in的网络特性,指出其依赖于浏览器运行,并提醒开发者关注浏览器兼容性。此外,文中还讨论了异步访问远程服务、网络断开后的处理、界面元素定义、事件编程和自定义函数等关键问题,提供了相关资源和示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

我过去发表过一些Office Add-in开发的文章,并且也在不同的场合分享过新的开发模式及其带来的机遇。有不少朋友给我反馈,也讨论到一些常见问题,我这里集中地总结一下给大家参考。

  1. Office Web Add-in的适用场景

    这是很多人的困惑。我在这篇文章中详细对照了三种为Office开发Add-in的技术和表现形式,这里再总结一下新的Web Add-in适用的场合

    • 开发人员本身对于网络开发比较熟悉
    • 你希望这个插件能够跨平台使用
    • 你希望更加方便地进行集中部署和更新
    • 这个插件的功能除了Office内部的操作,还有大量的外部资源访问
    • 用户能随时访问网络,并且网络条件有保障
    • 用户对于运行速度的敏感度不是很高,并不是说Web Add-in的运行速度慢,是因为Web Add-in开发中很多操作都是异步执行的,所以会造成感觉上的运行慢的体验
  2. 工作原理到底是怎么样的

    这也是很多人的疑问。我们可以稍微回顾一下历史,VBA是直接运行在Office进程(例如Excel)中的,它应该算是一个脚本,会有主程序动态加载,编译运行。一旦运行结束,则会释放资源。而VSTO则更为复杂,因为它是用.NET开发出来的托管代码,所以他本身是不能通过宿主程序直接运行的,而是需要从宿主程序(其实是COM)通过平台调用的方式(Interop)发起一个指令,然后由.NET CLR加载Add-in的组件,这个组件如果需要操作Excel的资源,又要通过平台调用的方式反过来调用COM。

    那么,今天的Web Add-in到底又是怎么样加载和运行的呢?它是通过一个独立的浏览器进程(例如IE)来运行的。下面我将详细解释这方面的原理。

    在不同的平台上,Office Add-in所依赖的浏览器及其版本是不一样的,这给开发人员要提一个醒:浏览器兼容性测试还是很重要的。官方文档有提到对于浏览器及其版本的要求:https://docs.microsoft.com/en-us/office/dev/add-ins/concepts/requirements-for-running-office-add-ins

    通过nslookup命令,可以看出我目前这个托管在azurewebsites.net上面的范例插件,它的服务器IP地址是 13.75.46.26(注意,因为Azure平台有很多服务器,所以实际上针对一个域名可能会有很多IP地址,如果你用nslookup命令可能得到的结果跟我不一样)

    在插件加载后,我们一般会在进程管理器中看到两个IE的进程。这里有一个细节,如果你的Office是32位的,那么它的核心进程会是一个32位的,你可以查看如果加载多个插件的话,它所占用的内存会逐步增加。但是,仍然是一个进程。

    但是,如果你的Windows是64位的,此时它会另外创建一个64位的IE进程,这两个进程其实是一个调用的关系。从下图可以看出来32位的进程其实是在调用64位那个进程的。

### Web Office 技术实现在线文档编辑器 #### 实现方式概述 Web Office 的核心在于提供一种基于浏览器的解决方案,使用户能够实时查看、编辑保存文档。这种技术通常依赖于客户端渲染技术服务器端处理能力相结合的方式完成。 #### 主要的技术栈支持工具 以下是几种常见的技术支持方案: 1. **ONLYOFFICE** ONLYOFFICE 是一款开源协作办公套件,支持文本文档、电子表格以及演示文稿三种主要类型的文件编辑[^3]。其工作原理是通过在服务端部署相应的转换引擎,并结合前端 JavaScript 编辑器实现实时协同编辑功能。为了确保多个用户的同步操作一致性,在编辑器配置中可以指定 `document.key` 参数,该参数的作用是用来识别同一个文档的不同会话并保持数据的一致性[^2]。 2. **Canvas-based 富文本编辑器 (如 Canvas-Editor)** 另一类较为轻量级的选择是以 HTML5 `<canvas>` 元素为基础构建起来的富文本编辑器组件。例如提到过的 canvas-editor 提供了一种 SVG Canvas 结合的方式来绘制复杂图形界面下的文字内容管理机制[^4]。这类库适合小型项目或者特定需求场景下快速搭建简单的文档编辑环境而无需引入庞大的第三方平台架构。 3. **其他商业或开源选项** - 商业化产品还包括 Google Docs API 或 Microsoft Office Online APIs 等大厂出品的服务接口;它们提供了高度成熟稳定的企业级应用体验但可能伴随较高的成本门槛。 - 开源领域除了上述提及之外还有像 Etherpad Lite 这样的纯文本实时协作编辑软件可供探索尝试。 #### 关键特性分析 无论采用哪种具体方法论去开发自己的 web office 解决方案都需要考虑以下几个方面因素: - 数据安全性保障措施(加密传输协议HTTPS/TLS等). - 文件格式兼容范围(PDF,XLSX,DOCX等等主流标准的支持程度). - 用户交互友好度设计(UI/UX优化原则遵循情况). ```javascript // 示例代码展示如何初始化一个 basic rich-text editor using fabric.js as backend rendering engine. const canvas = new fabric.Canvas('editor-canvas'); fabric.Textbox.prototype._TextStyleProperties.push('textBackgroundColor'); function addText() { const text = new fabric.IText('Tap and Type', { left: 100, top: 100, fontSize: 20, originX: 'center', originY: 'center' }); canvas.add(text); } addText(); ``` 以上是一个简单例子说明如果利用 FabricJS 创建基本画布上的可编辑区域框体结构.
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值