前言

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

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

产品效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpxpTvZA-1656308707874)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/576845d56a394dd0b529a1f5479e2a6d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 以上是案例实现效果图，亲们也可以点击文档预览亲自体验。

具体实现

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

① 搭脚手架

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

② 按需引入UI组件库

考虑到时效性，所以小编这里推荐的是[Element](https://link.juejin.cn/?target=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Finstallation "https://element.eleme.cn/#/zh-CN/component/installation")组件库，可以让你开发代码享受飞一般的感觉，同样的为了打包的代码体积较小，这里选用按需引入，按照Element官网按需引入步骤配置即可。（修改babel.config.js配置，在main.js按需引入组件等等）

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

③ 调用文档转换接口

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

在浏览器上你看的预览文件是什么，本质上是html展现出来的。别人上传的word等文件是什么，其实是一些二进制或者XMl数据流，那么怎么去解析，怎么去转换这些数据流将它转换为能够正常显示的html，小编这里调用的是[永中文档转换](https://link.juejin.cn/?target=https%3A%2F%2Fwww.yozodcs.com%2Fpage%2Fhelp.html%3Fhmsr%3Djuejin%26hmpl%3Dzhy%26hmcu%3D1%26hmkw%3D%26hmci%3D "https://www.yozodcs.com/page/help.html?hmsr=juejin&hmpl=zhy&hmcu=1&hmkw=&hmci=")接口，如果需要突破文件大小限制，需要的话可以找[客服申请](https://link.juejin.cn/?target=https%3A%2F%2Fwww.yozodcs.com%2Fquote%3Fhmsr%3Djuejin%26hmpl%3Dzhy%26hmcu%3D1%26hmkw%3D%26hmci%3D "https://www.yozodcs.com/quote?hmsr=juejin&hmpl=zhy&hmcu=1&hmkw=&hmci=")。

结合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格式文档的上下页的接口，所以代码里面只有这两个接口。