1、
<el-table-column label="预览">
<template slot-scope="scope">
<el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
</template>
</el-table-column>
2、
data() {
return{
previewWindow:''
}
}
3、
preview(url) {
const extension = url.split(".").pop(); // 获取文件扩展名
switch (extension) {
case "mp3":
case "ogg":
case "wav":
// 预览音频
const audioPlayer = new Audio(url);
audioPlayer.controls = true;
this.previewWindow = window.open("about:blank", "previewWindow", "width=400,height=80");
this.previewWindow.document.write(audioPlayer.outerHTML);
break;
case "mp4":
case "webm":
case "ogg":
// 预览视频
const videoPlayer = document.createElement("video");
videoPlayer.src = url;
videoPlayer.controls = true;
this.previewWindow = window.open("about:blank", "previewWindow", "width=800,height=600");
this.previewWindow.document.write(videoPlayer.outerHTML);
break;
case "pdf":
case "doc":
case "docx":
case "xls":
case "xlsx":
case "ppt":
case "pptx":
// 使用 Google Docs Viewer 预览文档
const previewUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true`;
this.previewWindow = window.open(previewUrl, "previewWindow", "width=800,height=600");
break;
case "jpg":
case "jpeg":
case "png":
case "gif":
// 直接预览图片
this.previewWindow = window.open("about:blank", "previewWindow", "width=800,height=600");
const content = `<img src="${url}" width="100%" height="100%" alt="预览图">`;
this.previewWindow.document.write(content);
break;
default:
// 无法预览该类型的文件
console.log(`不支持 ${extension} 文件类型的在线预览`);
break;
}
}