先看下效果（左右有小箭头可以滑动查看不同文件）：
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
接下去就是组件代码：
<template>
<Carousel
:dots="setting.dots"
:radius-dot="setting.radiusDot"
:id="viewerId"
v-if="fileUrls.length>0 && showBox"
v-model="nowIndex"
@on-change="carouselChange"
>
<CarouselItem v-for="(item,index) in PTFurls " :key="index">
<div style="text-align: center;">
<!-- <iframe
scrolling="auto"
:src="item.url"
class="scrollStyle"
frameborder="0"
style="height:470px"
width="100%"
height="100%"
:id="item.id"
@load = "cardFinish($event,item.id,'pdf')"
>该浏览器暂不支持PDF浏览，您可以下载该文件进行查看:
<a :src="item.url" rel="external nofollow">下载PDF文件</a>
</iframe>-->
<!-- <pdf ref="pdf" :url="item.url" :canvasid="index.toString()"></pdf> -->
<iframe
:id="'previewPdf'+index.toString()"
:src="allHost+'/static/pdf/web/viewer.html?file=' + encodeURIComponent(item.url)"
@load="cardFinish($event,item.id,'pdf')"
style="height:500px;width:100%"
></iframe>
<Spin size="large" fix v-if="item.loading"></Spin>
</div>
</CarouselItem>
<CarouselItem v-for="(item,index) in DOCurls" :key="index">
<div style="text-align: center;">
<iframe
scrolling="auto"
:src="'http://view.officeapps.live.com/op/view.aspx?src='+item.url"
class="scrollStyle"
frameborder="0"
style="height:470px"
width="100%"
height="100%"
>
该浏览器暂不支持文档浏览，您可以下载该文件进行查看:
<a :src="item.url" rel="external nofollow">下载文档文件</a>
</iframe>
</div>
</CarouselItem>
<CarouselItem v-for="(item,index) in Imgurls" :key="index">
<div style="text-align: center;">
<img
:src="item.url"
style="height:430px;cursor: pointer;"
alt="点击查看"
@click="imgShow(viewerId)"
/>
<div style="margin-top: 10px;text-align: center;">
<Button @click="plaintiffDown(item.url)">下载到电脑</Button>
</div>
</div>
</CarouselItem>
</Carousel>
<div v-else style="height:500px;text-align: center;">暂无数据</div>
</template>
<<script>
import "@static/viewer/viewer.css";
import Viewer from "@/libs/viewer";
import JSBase64 from 'js-base64'
// import pdf from "@/components/moreFileViewer/component/PDF.vue";
export default {
name: 'ZhViewer',
props: {
fileUrls: {
type: Array,
default: []
},
viewerId: {
type: String
}
},
components: {
// pdf,
},
data() {
return {
setting: {
dots: "outside",
radiusDot: true
},
nowIndex: 0, // 当前显示第几张
allHost: '', // 域名
PTFurls: [], // PTF文件
Imgurls: [], // IMG文件
DOCurls: [], // DOC文件
showBox: true
}
},
methods: {
imgShow(name) {
let gallery = new Viewer(document.getElementById(name), {});
gallery.show();
},
init() {
console.log(this.fileUrls)
},
plaintiffDown(item) {
// 必须同源才能下载
var alink = document.createElement("a");
alink.href = item;
let type = item.split(".")[1];
let name = item.split(".")[0];
alink.download = name + "." + type; // 图片名
alink.click();
},
cardFinish(e, id, type) { // 判断iframe是否加载完毕
switch (type) {
case "pdf":
this.PTFurls.forEach((item, index) => {
if (item.id === id) {
item.loading = false;
this.$set(item, "loading", false);
}
});
break;
}
// 未加载的页面，宽度可能还没计算好，需重新设置当前页相当于重新计算宽高
setTimeout(() => {
this.nowIndex = 0;
}, 2000);
},
carouselChange(oldValue, value) { // 轮播图切换
// 按顺序合并打印数组
let fileAry = [...this.PTFurls, ...this.DOCurls, ...this.Imgurls]// 顺序按照上面渲染循序来不能乱，否则找不到当前页的文件路径
// 获取当前页文件路径
this.$emit("setNowItem", fileAry[value].url)
}
},
mounted() {
},
computed: {
},
watch: {
fileUrls: {
immediate: true,
handler(val) {
// 获取当前域名
let protocolStr = window.location.protocol;
let k_host = window.location.host;
this.allHost = protocolStr + "//" + k_host + "/";
if (this.PTFurls.length !== 0) { // 只加载一次
return
}
this.PTFurls = [];
this.DOCurls = [];
this.Imgurls = [];
// 筛选文件分别显示
this.fileUrls.forEach((item, index) => {
let fileType = item.split('.')[item.split('.').length - 1];// 获取文件类型
fileType = fileType.toLowerCase();// 大写转小写
// let url=item.indexOf('http://')>-1 || item.indexOf('https://')>-1 ? item : this.allHost+item;//过滤文件路径
let url = item;// （已在webpackp中的proxy配置对url中的/upload进行对跨域处理，这里无需过滤，如果没有配置webpack的/upload跨域，都要拼接全路径，可以打开上面的）
switch (fileType) {
case 'pdf':
// 采用本站插件，在本地对/upload做了跨域，本地也可以正常显示，无需拼接全路径
this.PTFurls.push({url: url, loading: true, id: Math.random().toString(36).substr(2)});
break;
case 'xlsx':
case 'xls':
case 'docx':
case 'doc':
// 采用外站插件，需拼接全路径
url = item.indexOf('http://') > -1 || item.indexOf('https://') > -1 ? item : this.allHost + item;// 过滤文件路径
this.DOCurls.push({url: url, loading: false, id: Math.random().toString(36).substr(2)});
break;
case 'jpg':
case 'png':
case 'bmp':
case 'jpeg':
// 采用本站插件，在本地对/upload做了跨域，本地也可以正常显示，无需拼接全路径
this.Imgurls.push({url: url, loading: false, id: Math.random().toString(36).substr(2)});
break;
}
});
// 显示隐藏重新计算宽高
this.showBox = false
setTimeout(() => {
this.showBox = true
}, 800);
// 先到最后一页，最后在cardFinish回到第一页，确保异步加载页面重新计算宽度
this.nowIndex = this.fileUrls.length - 1;
}
}
}
}
</script>
引入该组件：
import ZhViewer from "@/components/moreFileViewer/moreFileViewer.vue";//路径自己放，这里只是例子
注册组件
components: {
ZhViewer
},
组件传参（viewerId 查看器id(多个查看器在同一个页面为了区分需要传)，fileUrls 文件路径：数组路径）：
<zh-viewer :viewerId="'evidence'+index" :fileUrls="delUrl(item.filePaths)"></zh-viewer>
