vue+element在线浏览文件轮播组件(支持pdf/doc/excel/jpg/png...多格式多文件浏览)

看自己用的框架选择，vue+iview查看器可以参考这篇文章https://www.jianshu.com/p/32cd865a8b34

效果图

微信截图_20200310161707.png

首先PDF为了提高兼容性，我们可以加载一个原生的PDF插件（pdf.js）
插件下载地址：http://mozilla.github.io/pdf.js/getting_started/
点击蓝色按钮的下载就行

image.png

在vue项目下的static添加一个pdf文件夹，放入以下得到的两个文件夹，

image.png

在vue项目下的static添加一个jpgView文件夹，放入这两个文件
viewer.js 和 viewer.css（下载路径：https://www.jianshu.com/p/8ffdbe48859e）

安装base64转换插件：
npm install js-base64 --save

写个组件页面（el-carousel自己找文档看参数，还有doc文档查看的话只能查看外网的，内网的文件看不了（一般现在分内外网开发，想测试效果的话，可以在正式服务器扔一份文件看效果））

引入组件，注册组件，引用组件

import moreFileViewer from '@/components/fileViewer/moreFileViewer.vue'// 路径自己放，这里只是例子
components: { moreFileViewer }
// v-if = 'modal'  ---是因为我放在模态框里面，一个页面上有多个数据有引入该插件，然后切换的时候根据外部标签的显示隐藏，不然第一份打开正常后，第二份点击图片放大的时候图片不显示，具体看自己的效果，有遇到的话可以根据外部标签的显示隐藏做改变
// fileUrls 绑定的数组，里面的对象是｛path: '链接'｝，记住是path字段，只要传的数组里面的对象包含path就行，或者不想叫path，上面组件代码自己改
 // viewerId 大家都知道，id是唯一的，所以这个加随机数，或者你们加下标什么都没问题，只要确保不重复就行
// emitNowIndex 获取当前展示的轮播图的下标


// 当前展示的文件
emitNowIndex (index) {
     this.nowIndex = index
},