前言

众所周知，word、excel、ppt 和 pdf 文件在线预览有很多解决方案，但大多无法播放 ppt 动画，或者功能非常单一。这不，最近产品经理闭关修炼三天，提出了如下需求：

• 监听文档翻页，根据页码执行相应的操作
• 文档转图片，每一页转成一张图片
• ppt 动画、内嵌视频在线播放
• ppt 多人同步播放
• ppt 画板功能

今天就给大家介绍一下几种主流的文档预览方案，有免费，有收费的，希望对大家有所帮助。

微软的 Office Web Viewer

调用微软的 office 在线预览服务，用法也比较简单：

http://view.officeapps.live.com/op/view.aspx?src=文件地址

优点是免费，可以实现 ppt 动画播放；缺点就是没有扩展性，无法实现其他功能。

官方示例：

https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/?eu=true

百度文档服务 DOC

百度文档服务是将文件上传至百度服务器，进行转码，转码成功之后会拿到一个 docId，根据 docId 预览不同的文件。在控制台中上传文档，然后复制以下代码，替换docId，即可在浏览器中预览。

<div id="reader"></div>
<script src="http://static.bcedocument.com/reader/v2/doc_reader_v2.js"></script>
<script type="text/javascript">
  (function () {
    var option = {
      docId: "doc-xxxxxx",
      token: "TOKEN",
      host: "BCEDOC",
      width: 800, // 文档容器宽度
      pn: 2, // 定位到第几页，可选
      ready: function (handler) { // 设置字体大小和颜色, 背景颜色（可设置白天黑夜模式）
        handler.setFontSize(1);
        handler.setBackgroundColor("#000");
        handler.setFontColor("#fff");
      },
      flip: function (data) { // 翻页时回调函数, 可供客户进行统计等
        console.log(data.pn);
      },
      fontSize: "big",
      toolbarConf: {
        page: true, // 上下翻页箭头图标
        pagenum: true, // 几分之几页
        full: false, // 是否显示全屏图标,点击后全屏
        copy: true, // 是否可以复制文档内容
        position: "center" // 设置 toolbar中翻页和放大图标的位置(值有left/center)
      } //文档顶部工具条配置对象,必选
    };
    new Document("reader", option);
  })();
</script>

可以看到百度文档的配置还是挺多的，文档转图片、监听翻页都不是问题，不过缺点就是 ppt 动画播放不了。

官方网址：

https://cloud.baidu.com/product/doc.html

永中 DCS 文档预览

永中的功能还是很强大的，分为私有云和公有云，私有云就是部署在自己的服务器上，公有云就是用永中的服务器。公有云有免费版，可以实现基本的预览功能。私有云支持定制，上述功能基本都可以实现。

官网上有很多示例，大家也可以把自己的文件上传上去，预览体验一下。

官方示例：

https://www.yozodcs.com/page/example.html

Office Web 365

office web 365 和永中 DCS 类似，也有部署版和在线版，不过部署版和在线版功能都非常强大，满足你对文档预览的所有幻想。

office web 365 也有免费版，使用方法很简单，先注册账号登录，然后把文件下载地址所在的域名添加到后台，后台会根据域名生成一个网站 ID，然后再使用下面的预览地址就可以了。

预览地址：

http://ow365.cn/?i=您的网站ID&furl=要预览的Office文件下载地址

如果文件下载地址是 https 开头，那么还要加一个 ssl=1 参数：

http://ow365.cn/?ssl=1&i=您的网站ID&furl=要预览的Office文件下载地址

官方示例：

https://officeweb365.com/Default/Viewview

总结

以上就是最主流的文档预览方案，如果产品经理再让你开发这些功能，知道怎么做了吧。只要有 money，就没有实现不了的功能 下面来做个小小的总结：

以上内容本人花了大量时间调研、尝试，如果对你有所帮助，不要忘了点个赞再走呦~

有问题欢迎评论区留言~