【Vue项目实践】实现在线预览word文件、excel文件

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

vue 在线预览word和excel

Vue实现Word文档在线预览功能

不知道是不是因为自己vue版本太低不兼容这个插件，还是其他原因，按照方法怎么都实现不了文件的预览。（项目的vue版本是2.5.17，如果有遇到类似情况解决了的，欢迎指教）第二个插件主要的问题就是版本的选择。实现附件在线预览是一个很常用的功能，这次正好碰到这样的需求，记录一下自己实现的过程。是后台提供的文件下载接口，返回文件流数据，请求成功后将文件流转换成。首先是插件的选择，网上实现预览的方法主要有两种，一个是。我的vue版本过低，不能直接使用最新版本的。看网上其他网友的教程都能够实现文件的在线预览。

在Vue开发中，可以利用一些第三方插件来实现文件预览功能。例如使用vue-office插件来实现文件的预览。注意：据网上资料所说，此插件还存在部分缺陷，比如docx的艺术字体、excel的多种数据格式解析不准确的问题，对此有很高要求的小伙伴慎用。文件上传时触发handleChange事件，执行操作：1. 解析文件名匹配对应预览组件，利用previewFileCom函数，2. 设置预览文件的url，3. 展示预览弹窗预览组件渲染完成、渲染失败时分别调用**render

因为这个图片是做了文字环绕，因此他识别不了.待补充其他的在线word预览组件。在word中设置的样式是。

最近遇到个问题，需要在线预览服务器或者远程的上传的word文档，找了好多资料。地址进入的页面：具体如何使用，就看文档了。废话不多说，资料来一波。

1.只需要使用<ifreme>标签就能实现。5.样式自己可以在iframe调节。

本次实现的文档预览的类型有：docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览

vue实现本地浏览器预览word(docx)、excel(xlsx)、pdf文件