纯前端处理

一、a标签下载

浏览器下载的方法有很多，最简单可以通过html的a标签下载

  1. <a href="./我爱你.mp4" download="下载名称">点击下载</a>

因此我们可以通过使用dom操作生成a标签，实现js下载

  1. function downloadToLocal(url,fileName){
  2.   let link = document.createElement('a') //创建a标签
  3.   link.style.display = 'none'  //将a标签隐藏
  4.   link.href = url  //给a标签添加下载链接
  5.   link.setAttribute('download', fileName) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
  6.   document.body.appendChild(link)  
  7.   link.click()  //执行a标签
  8. }
  9. export { downloadToLocal }

但是a标签下载存在同源策略，如果下载的文件是非同源的，虽然加了download属性，有些格式还是会直接打开预览（如mp4、jpg），而不是调用浏览器的下载事件。

二、blob下载

为解决此问题，可以通过二进制流进行下载，即通过blob转为二进制流下载，Blob对象可以看做是存放二进制数据的容器。

  1. const downloadRes = async () => {
  2.   // 内容转变成blob地址
  3.   let response = await fetch("https://vca-resource.obs.cn-north-4.myhuaweicloud.com/%E6%88%91%E7%88%B1%E4%BD%A01.mp4",{
  4.     method: 'GET',
  5.     mode: 'cors',
  6.   });
  7.   let blob = await response.blob(); 
  8.   // 创建隐藏的可下载链接
  9.   let objectUrl = window.URL.createObjectURL(blob);
  10.   let a = document.createElement('a');
  11.   a.href = objectUrl;
  12.   a.download = "测试123";
  13.   a.click()
  14.   a.remove(); 
  15. }

此方法的缺点是如果文件大，则速度较慢。因为需要拿到地址返回的二进制流（大小和需要下载的大小相同）,才能让用户进行下载。但此方法兼容性较好，适合小文件。

三、download.js

download.js是一个前端下载库
下载调用的方法download(data, strFileName, strMimeType)

  • data为二进制流 必选，如果只传递一个参数,data可以是url，download.js会通过blob方法转为流
  • strFileName是文件名 可选
  • strMimeType是文件类型 可选

download.js源码，放入utils后，直接import使用即刻。

  1. (function (root, factory) {
  2.   if (typeof define === 'function' && define.amd) {
  3.       // AMD. Register as an anonymous module.
  4.       define([], factory);
  5.   } else if (typeof exports === 'object') {
  6.       // Node. Does not work with strict CommonJS, but
  7.       // only CommonJS-like environments that support module.exports,
  8.       // like Node.
  9.       module.exports = factory();
  10.   } else {
  11.       // Browser globals (root is window)
  12.       root.download = factory();
  13. }
  14. }(this, function () {
  16.   return function download(data, strFileName, strMimeType) {
  18.       var self = window, // this script is only for browsers anyway...
  19.           defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
  20.           mimeType = strMimeType || defaultMime,
  21.           payload = data,
  22.           url = !strFileName && !strMimeType && payload,
  23.           anchor = document.createElement("a"),
  24.           toString = function(a){return String(a);},
  25.           myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
  26.           fileName = strFileName || "download",
  27.           blob,
  28.           reader;
  29.           myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
  31.       if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
  32.           payload=[payload, mimeType];
  33.           mimeType=payload[0];
  34.           payload=payload[1];
  35.       }
  38.       if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
  39.           fileName = url.split("/").pop().split("?")[0];
  40.           anchor.href = url; // assign href prop to temp anchor
  41.             if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
  42.               var ajax=new XMLHttpRequest();
  43.               ajax.open( "GET", url, true);
  44.               ajax.responseType = 'blob';
  45.               ajax.onload= function(e){ 
  46.                 download(e.target.response, fileName, defaultMime);
  47.               };
  48.               setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
  49.               return ajax;
  50.           } // end if valid url?
  51.       } // end if url?
  54.       //go ahead and download dataURLs right away
  55.       if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){
  57.           if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
  58.               payload=dataUrlToBlob(payload);
  59.               mimeType=payload.type || defaultMime;
  60.           }else{            
  61.               return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
  62.                   navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
  63.                   saver(payload) ; // everyone else can save dataURLs un-processed
  64.           }
  66.       }//end if dataURL passed?
  68.       blob = payload instanceof myBlob ?
  69.           payload :
  70.           new myBlob([payload], {type: mimeType}) ;
  73.       function dataUrlToBlob(strUrl) {
  74.           var parts= strUrl.split(/[:;,]/),
  75.           type= parts[1],
  76.           decoder= parts[2] == "base64" ? atob : decodeURIComponent,
  77.           binData= decoder( parts.pop() ),
  78.           mx= binData.length,
  79.           i= 0,
  80.           uiArr= new Uint8Array(mx);
  82.           for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);
  84.           return new myBlob([uiArr], {type: type});
  85.        }
  87.       function saver(url, winMode){
  89.           if ('download' in anchor) { //html5 A[download]
  90.               anchor.href = url;
  91.               anchor.setAttribute("download", fileName);
  92.               anchor.className = "download-js-link";
  93.               anchor.innerHTML = "downloading...";
  94.               anchor.style.display = "none";
  95.               document.body.appendChild(anchor);
  96.               setTimeout(function() {
  97.                   anchor.click();
  98.                   document.body.removeChild(anchor);
  99.                   if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
  100.               }, 66);
  101.               return true;
  102.           }
  104.           // handle non-a[download] safari as best we can:
  105.           if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
  106.               url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
  107.               if(!window.open(url)){ // popup blocked, offer direct download:
  108.                   if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
  109.               }
  110.               return true;
  111.           }
  113.           //do iframe dataURL download (old ch+FF):
  114.           var f = document.createElement("iframe");
  115.           document.body.appendChild(f);
  117.           if(!winMode){ // force a mime that will download:
  118.               url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
  119.           }
  120.           f.src=url;
  121.           setTimeout(function(){ document.body.removeChild(f); }, 333);
  123.       }//end saver
  128.       if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
  129.           return navigator.msSaveBlob(blob, fileName);
  130.       }
  132.       if(self.URL){ // simple fast and modern way using Blob and URL:
  133.           saver(self.URL.createObjectURL(blob), true);
  134.       }else{
  135.           // handle non-Blob()+non-URL browsers:
  136.           if(typeof blob === "string" || blob.constructor===toString ){
  137.               try{
  138.                   return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );
  139.               }catch(y){
  140.                   return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );
  141.               }
  142.           }
  144.           // Blob but not URL support:
  145.           reader=new FileReader();
  146.           reader.onload=function(e){
  147.               saver(this.result);
  148.           };
  149.           reader.readAsDataURL(blob);
  150.       }
  151.       return true;
  152.   }; /* end download() */
  153. }));

四、 华为obs二进制下载

  1. var obsClient = new ObsClient({ 
  2.   access_key_id: 'xxx',       
  3.   secret_access_key: 'xxx',       
  4.   server: 'xxx'
  5. }); 
  6. obsClient.getObject({ 
  7.   Bucket : 'vca-resource', 
  8.   Key : 'upload/我爱你1.mp4',
  9.   SaveByType : 'arraybuffer' 
  10. }, function (err, result) { 
  11.   if(err){ 
  12.     console.error('Error-->' + err); 
  13.   }else{ 
  14.     console.log('Status-->' + result.CommonMsg.Status); 
  15.     if(result.CommonMsg.Status < 300 && result.InterfaceResult){ 
  16.       // 读取对象字节长度
  17.       console.log('Object Length:\n'); 
  18.       console.log(result.InterfaceResult.Content.byteLength); 
  19.       console.log(result);
  20.       this.$downloadToLocal(result.InterfaceResult.Content, "测试123.mp4"); //a标签下载
  21.       // downloadVideo(result.InterfaceResult.Content,"测试.mp4")
  22.     }
  23.   } 
  24. });

后端处理

一、后端返回二进制流

  1. const fs = require('fs');
  2. ctx.type = "video/mpeg4";
  3. ctx.body = fs.readFileSync(urls.video);

前端配合

  1. this.$axios({
  2.   method: 'get', //请求方法 get post
  3.   url: url,  //请求地址
  4.   // params:params,
  5.   // headers:{
  6.   //   'Authorization':`Bearer ${getToken()}`
  7.   // },
  8.   responseType: 'blob'  //关键配置项
  9. }).then(res=>{
  10.   this.loading = false;
  11.   console.log(res);
  12.   downloadVideo(res.data,this.resultData.media_name + '.mp4');
  13. })

二、华为云处理

ContentDisposition 设置为 attachment

在前端请求修改 该视频的ContentDisposition

  1. videoUrl = videoUrl.replace("http://resources.bjvca.com","https://vca-resource.obs.cn-north-4.myhuaweicloud.com");
  3. this.$axios({
  4.   method:"put",
  5.   url:videoUrl + "?metadata=",  
  6.   headers:{
  7.     "Content-Disposition":"attachment",
  8.     "x-obs-metadata-directive":"REPLACE_NEW"
  9.   }
  10. }).then(res=>{
  11.   this.$downloadToLocal(videoUrl,this.resultData.media_name + '.mp4')
  12. })