方法一:word、xls、ppt文件在线预览功能
限制条件:必须是域名访问 不支持IP访问
一个url就可以访问了:
https://view.officeapps.live.com/op/view.aspx?src=文件地址
方法二:pdf文件在线预览功能
安装PDF插进 npm install --save vue-pdf
若需要预览其他格式文件需要后端转成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>
```
方法三:文件在线预览功能
支持大部分格式文件
这种方法主要是后端实现 将文件预览插件打成jar包 部署到服务器上
1.环境要求:
java 1.8+
2.部署运行:
本机以及虚拟机上运行:
1.从https://gitee.com/kekingcn/file-online-preview/releases地址下载最新的版发行包
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.项目实施:
在文件上传组件后配置预览选项
<span @click='preView'>预览</span>
点击方法
preView(){
var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址
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