目录

前言

产品效果

具体实现

①  搭脚手架

② 按需引入UI组件库

③ 调用文档转换接口

④ 自定义el-dialog文件预览组件

总结

---

前言

        大家对钉钉不陌生吧，那么提它干啥呐？别人发给你一个文件，以前都是先下载到本地，然后用office软件打开，现在有个在线预览，那岂不是不用下载直接就能看了。

       没错，文档在线预览就是这么方便，应用场景很广泛，譬如邮箱里面的文件，OA系统里面的文件，下面小编直接用Vue从零开始撸一套简单OA系统来实现文档预览。 

产品效果

        以上是案例实现效果图，亲们也可以点击文档预览亲自体验。

具体实现

        因为本文是用Vue来实现产品预览，所以Vue相关基础可能提及的较少，有兴趣的小伙伴可以复习一下Vue和Element。

①  搭脚手架

        考虑到目前主流还是Vue2，所以脚手架选用的是Vue2 + eslint，安装完依赖后，目录结构入下图所示：

② 按需引入UI组件库

        考虑到时效性，所以小编这里推荐的是Element组件库，可以让你开发代码享受飞一般的感觉，同样的为了打包的代码体积较小，这里选用按需引入，按照Element官网按需引入步骤配置即可。（修改babel.config.js配置，在main.js按需引入组件等等）

        引入组件库后，然后用el-container、el-menu搭建OA系统的Header、Aside和Main区域，同时用el-upload来搭建文件上传界面。

③ 调用文档转换接口

        思考一个问题：别人上传的文件，自己怎么在OA系统里面能够预览，本质上是什么？

        在浏览器上你看的预览文件是什么，本质上是html展现出来的。别人上传的word等文件是什么，其实是一些二进制或者XMl数据流，那么怎么去解析，怎么去转换这些数据流将它转换为能够正常显示的html，小编这里调用的是永中文档转换接口，如果需要突破文件大小限制，需要的话可以找客服申请。

        结合el-upload组件，action传入文档转换接口，因为是测试地址，所以对文件大小有限制（小于100M），上传文件转换成功后，可以再在handleSuccess事件中获得转换后的文档地址如下图： 

④ 自定义el-dialog文件预览组件

        上传文件后，点击文件可以直接打开预览地址，如果你想自定义预览窗口的话，小编这里也用el-dialog自定义了一个预览窗口，效果入下图：

        新增PreviewContent组件，用的是el-dialog组件，首先主体部分用iframe去显示预览区域，这一步很简单，只需要传入从父组件传入接口返回的地址作为src即可。（在传入的时候，小编也踩过坑，就是el-dialog__body竟然是以 lazy 模式进行渲染，也就是组件在mounted的时候，拿不到el-dialog__body这个ref，最后小编直接把获取iframe的ref直接放updated里面了，哈哈）

         高潮来了，怎么去控制iframe里面预览内容，譬如我加一个下一页的button的按钮，怎么控制文档去跳转到下一页呢？此时，改造el-dialog的title，用插槽slot替换：这里的按钮用的是el-tag实现。

         还有个问题，预览的主体部分是通过iframe直接引用，我在本地用控制预览的上下页码跳转，相当于本地发出的命令，怎么才能影响到iframe里面的dom。查了一下接口，本质上是获取iframe里面window的方法（预览文档必须有上一页、下一页等动作接口）。从小编当前的案例就可以看出以192.XXX.XXX.XXX:8080去访问ifram里面地址的window对象的方法肯定会存在跨域的问题，所以小编截取了他们接口的文档的一部分：（解决这种跨域问题用了postMessage）

        这里小编只在文档里面测试了ppt格式文档的上下页的接口，所以代码里面只有这两个接口。

---

总结

        源码上传至github，有兴趣的筒子们可以自行下载。预览的用途还是很广泛的，等小编有空再用react实现下一邮箱管理，这篇文档是按照写代码的逻辑来描述，主要将当时遇到的一些难点和疑惑叙述出来，文章写的不是很详细，如有疑问，还请多多指教，哈哈。