在新标签中下载 video 文件

src/views/home/VideoPage.vue

@@ -16,7 +16,7 @@
             </el-row>
           </div>
           <div class="text item">
-            <video-player :video-prop="video"/>
+            <video-player :video-prop="video" />
           </div>
         </el-card>
       </el-row>
@@ -66,7 +66,7 @@
                 icon="el-icon-download"
                 @click="cacheBiliVideo(video.videoId)"
               >
-                <span>{{video.cache.msg}}</span>
+                <span>{{ video.cache.msg }}</span>
               </el-button>
               <el-button
                 type="danger"
@@ -80,8 +80,8 @@
           </div>
           <div class="text item">
             <!--视频描述行-->
-            <span class="description" v-html="video.description"/>
-            <el-divider/>
+            <span class="description" v-html="video.description" />
+            <el-divider />
             <!--视频标签行-->
             <div class="v-tag">
               <el-tag
@@ -107,7 +107,7 @@
             </el-row>
           </div>
           <div class="text item">
-            <comment :videoId="video.videoId" />
+            <comment :video-id="video.videoId" />
           </div>
         </el-card>
       </el-row>
@@ -115,7 +115,7 @@
     <el-col :md="9">
       <el-row>
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <user-avatar-card v-if="user !== null" :userAvatar="user" />
+          <user-avatar-card v-if="user !== null" :user-avatar="user" />
         </el-row>
         <el-row v-if="showPlaylist" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
           <el-card class="box-card">
@@ -124,7 +124,7 @@
                 <h3>播放列表</h3>
               </el-row>
               <el-row>
-                <span>自动播放 <el-switch v-model="autoPlay"/></span>
+                <span>自动播放 <el-switch v-model="autoPlay" /></span>
               </el-row>
             </div>
             <div class="text item">
@@ -133,15 +133,17 @@
                 style="width: 100%"
               >
                 <el-table-column
-                  prop="title">
+                  prop="title"
+                >
                   <template slot-scope="scope">
                     <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
-                      <span>{{scope.row.videoId}}</span>
+                      <span>{{ scope.row.videoId }}</span>
                     </router-link>
                   </template>
                 </el-table-column>
                 <el-table-column
-                  prop="coverUrl">
+                  prop="coverUrl"
+                >
                   <template slot-scope="scope">
                     <span>10:00</span>
                   </template>
@@ -157,7 +159,7 @@
                 <h3>推荐视频</h3>
               </el-row>
               <el-row>
-                <span>自动播放 <el-switch v-model="autoPlay"/></span>
+                <span>自动播放 <el-switch v-model="autoPlay" /></span>
               </el-row>
             </div>
             <div class="text item">
@@ -206,9 +208,9 @@ import Comment from 'components/comment/Comment'
 import VideoCard from 'components/card/VideoCard'
 import UserAvatarCard from '@/components/card/UserAvatarCard'
 
-import {similarVideo, videoInfo, videoErrorReport, downloadVideo, cacheBiliVideo} from '@/api/video'
-import { collectItem } from "@/api/collect";
-import {getUserInfo} from "@/api/user";
+import { similarVideo, videoInfo, videoErrorReport, downloadVideo, cacheBiliVideo } from '@/api/video'
+import { collectItem } from '@/api/collect'
+import { getUserInfo } from '@/api/user'
 
 export default {
   name: 'VideoPage',
@@ -230,12 +232,12 @@ export default {
         errorCode: null
       },
       showPlaylist: false,
-      autoPlay: false,
+      autoPlay: false
     }
   },
   watch: {
     // 地址栏 url 发生变化时重新加载本页面
-    $route(){
+    $route() {
       this.$router.go()
     }
   },
@@ -322,33 +324,34 @@ export default {
       })
     },
     getDownloadUrl(videoId) {
-      let filename
+      // let filename
       downloadVideo(videoId).then(res => {
         if (res.code === 0) {
-          const downloadUrl = res.data
-          fetch(downloadUrl.url, {
+          const downloadUrl = res.data.url
+          window.open(downloadUrl, '_blank')
+          /* fetch(downloadUrl.url, {
             headers: {
               Authorization: 'Bearer ' + downloadUrl.token
             },
             method: 'GET',
-            credentials: 'include',
+            credentials: 'include'
           }).then(res => {
-            /*
+            /!*
             遍历 formdata
             for (const key of res.headers.keys()) {
               console.log(key + ' : ' + res.headers.get(key))
-            }*/
-            const header = res.headers.get('Content-Disposition');
-            const parts = header.split(';');
-            const encodeFilename = parts[1].split('=')[1];
+            }*!/
+            const header = res.headers.get('Content-Disposition')
+            const parts = header.split(';')
+            const encodeFilename = parts[1].split('=')[1]
             filename = decodeURI(encodeFilename)
             return res.blob()
           }).then(data => {
-              const blobUrl = window.URL.createObjectURL(data);
-              const a = document.createElement('a');
-              a.download = filename;
-              a.href = blobUrl;
-              a.click();
+            const blobUrl = window.URL.createObjectURL(data)
+            const a = document.createElement('a')
+            a.download = filename
+            a.href = blobUrl
+            a.click()
           }).catch(e => {
             this.$notify({
               title: '提示',
@@ -356,7 +359,7 @@ export default {
               type: 'warning',
               duration: 3000
             })
-          })
+          })*/
         } else {
           this.$notify({
             title: '提示',
@@ -410,7 +413,7 @@ export default {
           duration: 3000
         })
       })
-    },
+    }
   }
 }
 </script>