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

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