当前位置:   article > 正文

前端实现在线预览功能_el-table 前端预览文件

el-table 前端预览文件

1、

  1. <el-table-column label="预览">
  2. <template slot-scope="scope">
  3. <el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
  4. </template>
  5. </el-table-column>

2、

  1. data() {
  2. return{
  3. previewWindow:''
  4. }
  5. }

3、

  1. preview(url) {
  2. const extension = url.split(".").pop(); // 获取文件扩展名
  3. switch (extension) {
  4. case "mp3":
  5. case "ogg":
  6. case "wav":
  7. // 预览音频
  8. const audioPlayer = new Audio(url);
  9. audioPlayer.controls = true;
  10. this.previewWindow = window.open("about:blank", "previewWindow", "width=400,height=80");
  11. this.previewWindow.document.write(audioPlayer.outerHTML);
  12. break;
  13. case "mp4":
  14. case "webm":
  15. case "ogg":
  16. // 预览视频
  17. const videoPlayer = document.createElement("video");
  18. videoPlayer.src = url;
  19. videoPlayer.controls = true;
  20. this.previewWindow = window.open("about:blank", "previewWindow", "width=800,height=600");
  21. this.previewWindow.document.write(videoPlayer.outerHTML);
  22. break;
  23. case "pdf":
  24. case "doc":
  25. case "docx":
  26. case "xls":
  27. case "xlsx":
  28. case "ppt":
  29. case "pptx":
  30. // 使用 Google Docs Viewer 预览文档
  31. const previewUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(url)}&embedded=true`;
  32. this.previewWindow = window.open(previewUrl, "previewWindow", "width=800,height=600");
  33. break;
  34. case "jpg":
  35. case "jpeg":
  36. case "png":
  37. case "gif":
  38. // 直接预览图片
  39. this.previewWindow = window.open("about:blank", "previewWindow", "width=800,height=600");
  40. const content = `<img src="${url}" width="100%" height="100%" alt="预览图">`;
  41. this.previewWindow.document.write(content);
  42. break;
  43. default:
  44. // 无法预览该类型的文件
  45. console.log(`不支持 ${extension} 文件类型的在线预览`);
  46. break;
  47. }
  48. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/855325
推荐阅读
相关标签
  

闽ICP备14008679号