Vue前端在线预览文件插件使用详解
更新时间：2026年01月20日 11:00:22 作者：bug0到1
文章介绍了两种用于在线预览文档的插件：view.xdocin和view.officeapps.live,view.xdocin插件支持在线预览并延长使用时间,但不支持下载,view.officeapps.live插件是微软插件,但预览速度较慢,且有时会出现翻页问题,两种插件都适用于不需要下载和安装软件的场景
一、使用场景
像文档资料等，只想让他人在线预览，但不能下载。此等场景需求可以用到此插件。
二、此文档介绍两种插件
view.xdocin插件
(上线后免费几天，然后收费，添加作者后，可以延长使用几天)
view.officeapps.live插件
(微软插件，说的是免费，使用中)
三、代码示例
view.xdocin插件
https://view.xdocin.com/view?src=你的文档地址
注：
- 1.文档地址要用utf-8编码，并且外网可访问
- 2.添加的多行水印个数，不能调节
- 3.修改打印等参数，参考文档XDOC文档预览服务接口
微软view.officeapps.live插件
https://view.officeapps.live.com/op/embed.aspx?src=" + encodeURIComponent(file.url) https://view.officeapps.live.com/op/view.aspx?src=（file.url的urlencode编码)
注：
- 微软的两种预览方式，一种好像可以打印，另一种不是，可以自行测试。
- 预览的整体响应速度不是很快，文档页数太多，有时翻页会出现只能翻到5页左右，需重新打开，等文件全部加载完毕。
总结
1.随着互联网时代的飞速发展，越来越多的工作开始依赖于云端服务，我们的办公方式也逐渐发生了翻天覆地的变化。后台管理系统需要一种快速查看文档，无需下载并安装软件。
2.市面上的预览插件很多，上述两种方式，都是本人用过的总结，不喜勿喷，谢谢。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue的Scroll滚动事件触发方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了关于dev-tool安装方法(手动安装版),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue中子组件向父组件传值$emit、.sync的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
Vue的watch侦听器格式有两种：方法格式和对象格式的侦听器，这篇文章主要介绍了Vue watch 侦听对象属性相关知识,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue-cli 3.x配置跨域代理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法
这篇文章主要介绍了Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-06-06
下面小编就为大家分享一篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
ElementUI中el-dropdown-item点击事件无效问题
这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)
在实际应用中可能用户希望将系统中一个页面展示的所有数据报表,用PDF的文件格式下载下来,以便于其他用途,这篇文章主要给大家介绍了关于vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)的相关资料,需要的朋友可以参考下2024-06-06
本文主要介绍了vue3 update:modelValue用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-12-12
最新评论