选择ppt转html5工具需要考虑的一些问题

很多在线教育、在线会议应用需要在App中直接播放ppt。这就需要预先将ppt文件转换成带动画效果的html5格式，然后通过App中内置的浏览器来播放html5。

现在市面上的PPT转h5工具乍看起来有不少，但实际上使用之后会发现转换结果良莠不齐。要判定方法是否适用，可以从转换结果复现度、扩展性、开发支持等角度来考虑。

微演示ppt转html5工具的解析效果，可以到网站 http://www.whytouch.com 注册以后直接上传文件测试。本文主要讨论测评转换工具的时候需要关注的一些方面。

1. 转换结果复现度

转换结果复现度，主要考察复原的相似度、功能支持度、兼容性。我们会举一些在实践中常见的例子来说明不一致带来的问题。

相似度

相似度包括解析结果排版布局的相似度以及动画内容的相似度。
排版布局如果不一致，可能会造成图片文字的堆叠、错位。例如下图页面，如果解析的文字布局和原始文档不完全一致的话，椭圆形的红框就有可能套在不同的文字上而导致读者理解的问题。

要做到排版布局一致，对于矢量解析的文字，就必须正确的处理字体、字号，行间距、段间距，缩进、对齐等等众多问题。而这其中，字体是最为复杂的问题，因为你需要考虑到字体在不同设备、不同系统、不同浏览器环境下的兼容问题（有些解析器会将所有文字导出图片规避字体问题，但这样做则导致结果文件较大，浪费带宽）。
对于图片，则需要能正确处理图片坐标、色度、透明度、滤镜等等问题。另外对于gif文件，解析后的内容是否还包含动画也是一个要注意的项。

动画相似度。

ppt包含150种左右的页面内部动画形式。在ppt标准中定义了动画名称和参数，但实际的效果其实还是需要以office为标准。
转换好的html5中，需要用js实现这些动画，就可能和原来的动画效果有所区别。特别是在解析方案不同的情况下，各种动画效果可能无法很好的支持，需要引入一些特殊的技巧。
不过，根据用户的反馈，大多数时候，具体使用哪种动画并不是用户非常关注的事情（除非一些非常关注动画效果的设计展示类型的ppt），一些并未实现的动画效果被用另外一种动画效果替换了也不一定会有什么违和感。但一个动画最终的结果是否和原始播放一致则相对重要。比方说，循环播放的动画是否能循环？多次组合动画执行之后，元素的最终位置和形状是否和office的执行结果一致？这些都可能对演示造成影响。

另外动画里面还存在一个wps老版本和office版本的兼容性问题。有些使用旧版本的wps生成的ppt文件，在执行文字逐段动画的时候，我们会看到分段的内容在wps中和在office中效果是不同的（例子从这里下载）。一个解析工具最终效果究竟和offic而相同还是和wps相同，还是能取两者之大成，能够展示最完美的结果？这点在选择工具之前是需要向厂商确认的。

功能完整性

office文件格式是相当复杂的。有些特定功能可能极少使用。但是在开发一个通用的教育或者培训软件的时候，难以简单的限定客户使用office的哪些功能。因此ppt解析工具支持的功能越多肯定是越好的。
我们在了解了转换工具的基本功能之后，也需要一下他们对office一些不常使用的功能的支持情况。包括：

• 特殊的文字对齐方式（非基线对齐）
• 设置文字效果
• smart art动画
• 第三方组件
• 第三方工具实现的动画（属性动画）
• 视频播放标签下的功能（如全屏播放、未播放时隐藏等）
• 文字竖排动画
• 模板动画（更详细的话分为layout动画和master动画）
• 宏
• flash
• …

其他还有很多。
不过根据我们的调查，现在没有一个工具能完美解决以上所有问题。这种情况下，一个好的技术支持服务是非常重要的。

设备兼容性

在开发微演示的过程中，我们发现的兼容性问题，主要体现在以下几个方面。

• WPS Vs. Office
  众所周知，office文件的标准都是微软颁布的。但实际上，标准和实现是有差异的。即使微软自身的office软件都不能做到和标准完全一致，WPS在部分功能实现上和Office有差异也就是自然的事情。甚至我们也曾经碰到wps和office打开文件查看不一致，而从标准分析，wps的解析结果才是正确结果的例子。
  如果要做的是一个国际化的产品，那么ppt播放结果应当尽量和office一致；但是在国内，保持和WPS的兼容性则是很重要的。

• office版本的兼容性
  ooxml的标准是从office2010开始才开始引入的，文件的后缀名改为pptx。这个版本和2007有相当的变化。但也导致2007的部分文件在新版本中可能打开后显示不同。作为一个ppt文件转换工具，自然也需要兼容office不同时期的版本文件。

• 浏览器版本的兼容性
  不同系统不同浏览器对HTML5的支持并不一致。转换结果html5在这些平台上表现是否正常都需要测试。这些表现出来的错误千奇百怪，且不容易调试。
  这里举一些例子，例如在苹果的系统上，对于自定义的字体，粗体的场合，文字的宽度和其他系统是不一样的；在微信内嵌的浏览器中，触摸移动的行为和其他浏览器并不一致；谷歌chrome对字体的支持有要求，如果字体中包含vhea，vmtx等表头，将会无法正确解析，等等。

2.扩展性

转换复现度是转换器的基本功能。但对于第三方App的开发者来说，文档格式的公开，操作接口的完整，播放过程中事件的通知等同样非常重要。有了这些数据，开发者就不仅能播放PPT，还能对结果进行控制和改造，从而开发语音课件录制工具，远程同步直播系统等等。

（微演示ppt转html5的接口文档可以看这里）

我们以微演示的转换结果为例来说明我们是如何满足这些需求的。

转换的最终内容格式。

在我们的转换结果主html文件中，每一个页面都单独生成一个div，并命名为s0, s1, s2…页面中的元素按照解析顺序生成div，放在页面div之下。名字按规则命名为s0#7，前面s0代表页面，7则是元素在原始ppt中的id号。元素使用到的css则被直接写在元素属性中。
我们极少使用外部css文件和class。这方便于内容被直接改造在外部使用。

在主页面之外，我们还生成了一个pg.js文件放置所有的附加信息和动画信息。所有的备注内容被放在一个_note变量下，这可以在教师授课时被显示在辅助屏幕上；动画参数被放置在_control变量中，直接修改其中的内容，可以在自动播放和手动播放中切换；同时我们还将整个ppt的文本额外抽取出来放在pg.js中，需要在页面中检索内容时可以直接使用。

我们完全不对这些内容作任何加密。在现有的html标准机制下，在前端进行加密是没有意义的，反而会阻碍有需要的用户对内容作进一步改造。

播放控制是否简单

除了提供默认的鼠标点击的播放方式，我们同时也提供了播放下一个动画，回退一个动画，跳转到指定页面，重置指定页面，停止所有的动画等几个接口。这样开发者需要实现自己的控制方式的时候就可以灵活调用。

实际上我们确实也碰到各种各样的客户，需要在电脑端、平板端、安卓电视端，使用键盘、鼠标、遥控器来播放ppt。微演示的这些接口很好的满足了他们的需求。

修改和扩展

随着AItoC的来临，其实ppt可以发挥更大的作用。例如自动生成内容，结合语音生成自动制作课件，嵌入3D模型或其他组件搭建更酷的课件形式等等。这些额外的扩展都要求最终的解析结果更方便阅读和扩展。
我们的js播放器在这方面做了大量工作，对于播放器的每一个重大状态变化，我们都添加了事件或数据接口，这使开发者可以作更多更深入的整合。

3. 技术支持

客观的说，ppt转h5是有一定技术含量，同时工作量也不小的工作。而最终的生成结果也包含着相对复杂的格式和操作逻辑。目前市面上的产品没有哪家能确保自己在所有平台上完美运行（即使是office原厂的微软或WPS也做不到，他们两家在很多原文件上直接就已经互不一致了）。这就需要厂商对客户提供足够的技术支持，在碰到问题的时候能帮助解决或给出替代方案。

微演示作为这方面的专业厂商，有以下几点优势。

• 相对某些知名的海外工具，微演示作为国内的团队，我们和本土企业可以更紧密地联系，给与更多的技术支持。
• 代码自研。我们的代码是在微软公开的COM组件和公开的OOXML标准的基础上发展起来的。经过十余年的不懈努力，我们对office格式、html5前端以及其他涉及到的问题都有了一套自有的解决方案。相对很多使用开源代码的团队，我们有能力在更短的时间内判定问题，修复bug，给出解决方案。
• 微演示目前在国内已经有数家大企业在使用。知名的有清华大学旗下K12教育平台爱学堂，国内顶尖企业培训独角兽云学堂等。高峰期我们的服务器转换文件数量在5000个/日之上。系统在鲁棒性，完整性，并发处理方面都经历过充分的考验。

结语

ppt是一项存在了近30年的演示工具，被教师、培训师和企业白领广泛使用。通过转换工具，将ppt转为带动画的html5，嵌入到App中播放，让文档动起来，会大大增强教育培训办公类App的竞争力。
本文主要介绍筛选对应技术时候可以关注的一些问题和细节。如果你也有这方面的疑问，不妨联系我们（微信：wx_weiyanshi）。