看自己用的框架選擇赖瞒，vue+iview查看器可以參考這篇文章http://www.reibang.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（下載路徑：http://www.reibang.com/p/8ffdbe48859e）
安裝base64轉(zhuǎn)換插件：
npm install js-base64 --save
寫個組件頁面（el-carousel自己找文檔看參數(shù)，還有doc文檔查看的話只能查看外網(wǎng)的，內(nèi)網(wǎng)的文件看不了（一般現(xiàn)在分內(nèi)外網(wǎng)開發(fā)掘譬，想測試效果的話，可以在正式服務(wù)器扔一份文件看效果））
<template>
<div>
<el-carousel
:id="viewerId"
:autoplay='false'
v-if="fileUrls !== undefined && fileUrls.length>0"
@change="changeIndex">
<el-carousel-item v-for="(item) in PTFurls" :key="item.id">
<div style="text-align: center;height: 100%;">
<iframe
scrolling="auto"
:src="item.url"
class="scrollStyle table_120_list"
frameborder="0"
width="100%"
height="100%"
:id="item.id"
@load="cardFinish($event,item.id,'pdf')"
>
該瀏覽器暫不支持PDF瀏覽呻拌，您可以下載該文件進行查看:
<a :src="item.url" rel="external nofollow">下載PDF文件</a>
</iframe>
<Spin size="large" fix v-if="item.loading"></Spin>
</div>
</el-carousel-item>
<el-carousel-item v-for="(item,index) in DOCurls" :key="index+100">
<div style="text-align: center;height: 100%;">
<iframe
scrolling="auto"
:src="'http://view.officeapps.live.com/op/view.aspx?src='+item.url"
class="scrollStyle table_120_list"
frameborder="0"
width="100%"
height="100%"
>
該瀏覽器暫不支持文檔瀏覽葱轩，您可以下載該文件進行查看:
<a :src="item.url" rel="external nofollow">下載文檔文件</a>
</iframe>
</div>
</el-carousel-item>
<el-carousel-item v-for="(item) in Imgurls" :key="item.id">
<div style="text-align: center;height: 100%;">
<img
:src="item.url"
style="height:85%;cursor: pointer;width: 100%"
alt="點擊查看"
title="點擊查看"
@click="imgShow(viewerId)"
/>
<div style="margin-top: 10px;text-align: center;">
<el-button type="primary" @click="plaintiffDown(item.url)" plain>下載到電腦</el-button>
</div>
</div>
</el-carousel-item>
</el-carousel>
<div v-else style="height:500px;text-align: center;margin-top: 50px;width: 100%">暫無數(shù)據(jù)</div>
</div>
</template>
<script>
import '@static/viewer/viewer.css'
import Viewer from '@static/viewer/viewer'
import { urlRedirect } from '@/libs/address'
export default {
name: 'ZhViewer',
props: {
fileUrls: {
type: Array,
default: function () {
return []
}
},
viewerId: {
type: String
}
},
data () {
return {
setting: {
dots: 'outside',
radiusDot: true
},
nowIndex: 0, // 當前顯示第幾張
allHost: urlRedirect(), // 域名
PTFurls: [], // PTF文件
Imgurls: [], // IMG文件
DOCurls: [] // DOC文件
}
},
methods: {
changeIndex (index) {
this.nowIndex = index
},
imgShow (name) {
// 放在模態(tài)框的有時候會出現(xiàn)第一次圖片放大顯示在模態(tài)框下面，所以加個層級
let gallery = new Viewer(document.getElementById(name), {
show: function () {
gallery.update()
},
hide: function() {
gallery.destroy() // 圖片點擊放大后關(guān)閉圖片時銷毀
},
zIndex: 9999
})
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()
// 以上注釋掉的部分藐握，是會在同個頁面上替換鏈接打開圖片酿箭，我們的需求是開新頁面，所以我用了window.open()
window.open(item)
},
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)
},
spinShow () {
return false
}
},
mounted () {
// console.log(this.fileUrls)
},
watch: {
fileUrls: {
immediate: true,
handler (val) {
// 當前域名
this.allHost = `${urlRedirect()}/` --------------------------自己的域名自己配
this.PTFurls = []
this.DOCurls = []
this.Imgurls = []
// console.log('fileUrls', this.fileUrls)
// 篩選文件分別顯示
this.fileUrls.forEach((item, index) => {
let fileType = item.path.split('.')[item.path.split('.').length - 1] // 獲取文件類型
let url = item.path.indexOf('http://') >= 0 ? item.path : this.allHost + item.path // 過濾文件路徑
let time = Date.parse(new Date())
switch (fileType) {
case 'pdf':
this.PTFurls.push({
url: url + '?' + time,
loading: false,
id: item.id
})
break
case 'xlsx':
case 'docx':
this.DOCurls.push({
url: url + '?' + time,
loading: true,
id: Math.random()
.toString(36)
.substr(2)
})
break
case 'jpg':
case 'png':
case 'jpeg':
this.Imgurls.push({
url: url + '?' + time,
loading: true,
id: item.id
})
break
}
})
// this.nowIndex = this.fileUrls.length - 1
this.nowIndex = 0
}
},
// 當前輪播的下標 ------------外部刪除或者添加操作的時候會用到
nowIndex: {
immediate: true,
handler (newVal, oldVal) {
this.$emit('emitNowIndex', newVal)
}
}
}
}
</script>
引入組件趾娃，注冊組件，引用組件
import moreFileViewer from '@/components/fileViewer/moreFileViewer.vue'// 路徑自己放缔御，這里只是例子
components: { moreFileViewer }
// v-if = 'modal' ---是因為我放在模態(tài)框里面抬闷，一個頁面上有多個數(shù)據(jù)有引入該插件，然后切換的時候根據(jù)外部標簽的顯示隱藏耕突，不然第一份打開正常后笤成，第二份點擊圖片放大的時候圖片不顯示，具體看自己的效果眷茁，有遇到的話可以根據(jù)外部標簽的顯示隱藏做改變
// fileUrls 綁定的數(shù)組炕泳，里面的對象是｛path: '鏈接'｝，記住是path字段上祈，只要傳的數(shù)組里面的對象包含path就行培遵，或者不想叫path，上面組件代碼自己改
// viewerId 大家都知道登刺，id是唯一的籽腕，所以這個加隨機數(shù)，或者你們加下標什么都沒問題纸俭，只要確保不重復就行
// emitNowIndex 獲取當前展示的輪播圖的下標
<more-file-viewer v-if='modal' :fileUrls='viewArr' :viewerId="'one'+Math.floor(Math.random() * 10000)" @emitNowIndex="emitNowIndex"></more-file-viewer>
// 當前展示的文件
emitNowIndex (index) {
this.nowIndex = index
},
