方式.常规预览:
图片,视频,pdf,页面等常规文件,直接用iframe标签就行了,但是word,ppt,exl等文件在iframe下直接下载下来,这个和预期的功能不符合,所以,我们需要对word,ppt,exl等文件进行处理,下面是获取文件后缀名的方法
//后缀名判断
getFileExtendingName (filename) {
// 文件扩展名匹配正则
var reg = /\.[^\.]+$/;
var matches = reg.exec(filename);
if (matches) {
return matches[0];
}
return '';
},
方式2.kkFileView
kkFileView开源在线预览文件,这个方法是开源的,在文件较大的情况下,加载速度比价慢
kkFileView官网文档:https://kkfileview.keking.cn/zh-cn/docs/production.html
template中
<iframe :src="previewUrl" class="iframe_left" v-show="flieShow" frameborder="0"></iframe>
js代码
//在main.js文件下配置全局文件地址,地址是调用的后端的本机地址,端口8012不需要改
Vue.prototype.$wordUrl="http://*******:8012"
//ressss 是要预览的文件地址
//this.previewUrl 是定义在iframe标签上的路径,
this.previewUrl=this.$wordUrl+'/onlinePreview?url='+encodeURIComponent(BASE64.encode(ressss))
方式3.docx-preview
此方法只针对word文档,相对于kkFileView的好处是,速度要比使用kkFileView快很多
安装依赖
npm i docx-preview --save
在组件中script最开始引入
// 引入docx-preview插件
let docx = require("docx-preview");
当文件后缀为.docx时,执行方法
//查看word文件
//e为文件地址
Checkdocx(e){
this.$axios.post("*******",{
location:e},{
responseType: "blob"}).then(({
data})=>{
docx.renderAsync(data, this.$refs.file);
})
},
html代码
<div class="iframe_left" ref="file"></div>
方式4.文件转ptf
此方法的思路就是传文件路径给后端,后端转成ptf后返回pft路径,在预览之后调用删除接口在删除ptf,因为ptf在iframe标签中可以直接展示。