前端實現下載文件功能總結

如果只是下載個xlsx靜態模板文件，可以使用純前端形式來實現
一種是給頁面要實現點擊下載功能的元素綁定事件

let dounBtn = document.querySelector(".down")
dounBtn.onclick = function () {
    console.log("xxxx")
    window.open(`../demo.docx`, '_self')
}

另外一種是直接頁面上放置a標籤
<a href="../demo.docx">我是a標籤，點我可以實現下載</a>
a標籤還有一個download屬性，可以自定義文件名稱，但是我試驗了一下，並沒有產生作用。

上面的方法只適合下載xlsx等格式的模板類的小文件，當下載資源是mp3或者視頻資源甚至text文本資源時，瀏覽器會直接打開該文件，實現不了下載的功能。而且上述方法也都不能監聽錯誤，功能非常受限，所以接下來說一下向後端拿數據實現的下載功能。
實現思路：先請求音頻的鏈接,再把返回值轉換成二進制,再根據他二進制對象生成新鏈接,再創建a標籤,點擊a標籤，實現下載功能。
下面是vue頁面中寫法，和普通頁面差不多。

<script>
    this.$axios({
    method: 'get',
    url: row.src,
    responseType: '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>