vue预览 pdf、word、xls、ppt、txt文件的实现方法
更新时间:2022年04月28日 14:39:32 作者:根子的数据库
这篇文章主要介绍了vue预览 pdf、word、xls、ppt、txt文件的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
首先说下为什么要分享:网上教的都是特么的啥玩意!!!真特么垃圾,各种方法说不到点子上!!!真是特么气死我了!还有那群只会复制粘贴的帖子!自己都不做测试就会复制粘贴别人的,然后就发出来误人子弟,我真是醉了!
说下方法
1. 在页面内加个 iframe
src地址即为要展示的文件地址

这里我用的是 elementui ,你们如果用其他的也是用iframe就得了
2. word、xls、ppt这些文件
要用微软官方的预览地址
注意:1. 文件地址必须公网;2. 静态资源不要有访问权限
最后,你控制的只是src地址
微软解析地址:https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

这里我只是控制了 imgVisbleURL 变量 然后 iframe的src就取的这个变量的 地址
3. 最终效果
(1)txt

(2)word、xls、ppt

(3)pdf

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
详解VUE里子组件如何获取父组件动态变化的值
这篇文章主要介绍了详解VUE里子组件如何获取父组件动态变化的值,子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件,需要的朋友可以参考下
2018-12-12
一篇文章让你看懂封装Axios
axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护,这篇文章主要给大家介绍了关于封装Axios的相关资料,需要的朋友可以参考下
2022-01-01
前端构建工具Webpack、Vite区别有哪些
Webpack和Vite是两种主流的前端构建工具,它们在功能、性能和使用场景上有所不同,Webpack提供丰富的功能和配置,适合大型复杂项目,但可能导致启动和构建速度较慢,Vite基于ES模块,支持快速的热替换,适合小型或中等项目,需要的朋友可以参考下
2024-10-10
vue调用swiper插件步骤教程(最易理解且详细)
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
2023-04-04
Vue.js实现点击左右按钮图片切换
这篇文章主要为大家详细介绍了Vue.js实现点击左右按钮图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2022-07-07
vue正确使用watch监听属性变化方式
这篇文章主要介绍了vue正确使用watch监听属性变化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-04-04
最新评论