Vue实现媒体文件下载

Vue实现媒体文件下载

音频支持先播放再下载，视频是直接下载

vue

      <el-table-column label="音频" align="center" prop="audioPath" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.audioPath!=null" type="text" @click="handlePlay(scope.row)">音频播放</el-button>
          <el-dialog title="音频播放" :visible.sync="dialogVisible" width="40%" :before-close="stop">
            <template>
              <center>
                <audio
                  :src="src"
                  controls="controls"
                  ref="audio"
                >Your browser does not support the audio element.</audio>
              </center>
            </template>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column label="视频" align="center" prop="videoPath" >
          <template slot-scope="scope">
          <el-button v-if="scope.row.videoPath!=null" size="mini"
                     type="text"
                     icon="el-icon-edit" @click="handleVideoPlay(scope.row)"
          >视频下载</el-button>

        </template>

      </el-table-column>

data

      videoSrc: "",
      //音频播放
      src: "",
      dialogVisible: false,
      dialogVideoVisible: false,

methods

    beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    },

    //播放音乐组件
    handlePlay(row) {
      this.src = row.audioPath;
      this.dialogVisible = false;
      this.play();

    },

//播放
play() {
  this.dialogVisible = true;
  this.$refs.audio.play();
},
//音频暂停
stop() {
  this.dialogVisible = false;
  this.$refs.audio.pause();
  this.$refs.audio.currentTime = 0;
},

    //视频下载
    handleVideoPlay(row) {
      var name = "download";
      var url = row.videoPath;
      var suffix = url.substring(url.lastIndexOf("."), url.length);
      //跳过浏览直接下载
      fetch(url)
        .then(res => res.blob())
        .then(blob => {
          const a = document.createElement("a");
          const objectUrl = window.URL.createObjectURL(blob);
          a.download = name;
          a.href = objectUrl;
          a.click();
          window.revokeObjectURL(objectUrl);
        })
    },