way.regular preview:
图片，视频，pdf,页面等常规文件，直接用iframe标签就行了，但是word,ppt,exl等文件在iframe下直接下载下来，这个和预期的功能不符合，所以，我们需要对word,ppt,exl等文件进行处理,下面是获取文件后缀名的方法
//后缀名判断
getFileExtendingName (filename) {
// 文件扩展名匹配正则
var reg = /\.[^\.]+$/;
var matches = reg.exec(filename);
if (matches) {
return matches[0];
}
return '';
},
Method 2.kkFileView
kkFileView open source online preview file, this method is open source, in the case of large files, the loading speed is slower than the price
kkFileView official website document: https://kkfileview.keking.cn/zh-cn/docs/production.html
template
<iframe :src="previewUrl" class="iframe_left" v-show="flieShow" frameborder="0"></iframe>
js code
//在main.js文件下配置全局文件地址，地址是调用的后端的本机地址，端口8012不需要改
Vue.prototype.$wordUrl="http://*******:8012"
//ressss 是要预览的文件地址
//this.previewUrl 是定义在iframe标签上的路径，
this.previewUrl=this.$wordUrl+'/onlinePreview?url='+encodeURIComponent(BASE64.encode(ressss))
Method 3.docx-preview
This method is only for word documents. Compared with kkFileView, the advantage is that it is much faster than using kkFileView
install dependencies
npm i docx-preview --save
The script is first introduced in the component
// 引入docx-preview插件
let docx = require("docx-preview");
When the file suffix is .docx, execute the method
//查看word文件
//e为文件地址
Checkdocx(e){
this.$axios.post("*******",{
location:e},{
responseType: "blob"}).then(({
data})=>{
docx.renderAsync(data, this.$refs.file);
})
},
html code
<div class="iframe_left" ref="file"></div>
Method 4. Convert file to ptf
The idea of this method is to pass the file path to the backend, and the backend will return the pft path after converting it to ptf. After previewing, call the delete interface to delete the ptf, because the ptf can be displayed directly in the iframe tag.