方法一:word哈扮、xls规哪、ppt文件在線預(yù)覽功能
限制條件:必須是域名訪問? 不支持IP訪問
一個url就可以訪問了:
https://view.officeapps.live.com/op/view.aspx?src=文件地址
方法二:pdf文件在線預(yù)覽功能
安裝PDF插進? npm install --save vue-pdf
若需要預(yù)覽其他格式文件需要后端轉(zhuǎn)成PDF
```
<template>
????<div>
??????????<pdf?ref="pdf"?:src="pdfUrl"?style="width:?100%;"?/>
????</div>
</template>
<script>
import?pdf?from?'vue-pdf'
export?default?{
????data(){
????????return:?{
????????????pdfUrl:?'',
????????}
????}
????created()?{
???????const?path?=?'test.pdf'//?你獲取到的pdf路徑
???????//?pdf.createLoadingTask解決文件件跨域問題
???????this.pdfUrl?=?pdf.createLoadingTask(path)
??},
}
</script>
</script>
```
方法三:文件在線預(yù)覽功能
支持大部分格式文件
這種方法主要是后端實現(xiàn)? 將文件預(yù)覽插件打成jar包 部署到服務(wù)器上
1.環(huán)境要求:
java 1.8+
2.部署運行:
本機以及虛擬機上運行:
1.從https://gitee.com/kekingcn/file-online-preview/releases地址下載最新的版發(fā)行包
2.解壓kkFileView-2.x.x.Zip包
3.打開解壓后文件夾的bin目錄禁荸,運行startup腳本(Windows下以管理員身份運行startup.bat萍程,Linux以root用戶運行startup.sh)
4.瀏覽器訪問本機8012端口(http://127.0.0.1:8012)即可看到項目演示用首頁
3.項目實施:
在文件上傳組件后配置預(yù)覽選項
<span @click='preView'>預(yù)覽</span>
點擊方法
preView(){
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要預(yù)覽文件的訪問地址
var previewUrl = originUrl + '&fullfilename='+文件名稱
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));
}
4.kkFileView文檔:
https://gitee.com/kekingcn/file-online-preview/wikis/Home?sort_id=1444366