前端實現文件下載全部方式

一.a標籤完成

<a href="文件連接" download='下載文件名'></a>
<--!可是其中的download對應音頻文件和視頻文件無效-->

二.js實現下載

<script>
    const a = document.createElement('a');
    a.setAttribute('href', '文件連接');    //a.href='文件連接'
    a.setAttribute('download', '文件名');   //a.download='文件名'
    a.click();
</script>

三.js中ajax實現音頻或者視頻不跳轉進行文件下載

寫代碼的思路

先請求音頻的連接,再把返回值轉換成二進制,再根據他二進制對象生成新連接,再建立a標籤,點擊a標籤

//這是vue裏面的寫的普通頁面也差很少
<script>
    this.$axios({
    method: 'get',
    url: row.src,
    responseType: 'blob'  //這個不能少,讓response二進制形式,若是你按照網上教程不設置這個將返回值進行BLOB([])進行處理可能會出現解析錯誤
}).then(response => {
    const href = URL.createObjectURL(response.data); //根據二進制對象創造新的連接
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('download', row.title);
    a.click();
    URL.revokeObjectURL(href);
}
</script>

四.fetch實現

//原理和ajax如出一轍
function request() {
  fetch('<接口地址>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: '<請求參數：json字符串>',
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}
 
function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
}
 
request();