2019-07-09 自己写的一个基于vue+iview在线浏览文件轮播组件(支持pdf/doc/excel/jpg/png...多格式多文件浏览)

先看下效果（左右有小箭头可以滑动查看不同文件）：

image.png

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

image.png

你会得到两个文件夹：

image.png

在vue项目下的static添加一个pdf文件夹，放入这两个文件：

image.png

在vue项目下的static添加一个jpgView文件夹，放入这两个文件：

viewer.js 和 viewer.css https://www.jianshu.com/p/90e4b876608a (自行创建和复制)

然后安装base64转换插件：

npm install js-base64 --save

接下去就是组件代码：

<

引入该组件：

import ZhViewer from "@/components/moreFileViewer/moreFileViewer.vue";//路径自己放，这里只是例子

注册组件

  components: {
    ZhViewer
  },

组件传参（viewerId 查看器id(多个查看器在同一个页面为了区分需要传)，fileUrls 文件路径：数组路径）：