赞
踩
- <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;
- }
- }

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。