前端实现下载文件功能总结

如果只是下载个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>