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

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

下面的方法也可以实现根据url点击下载

// 保存到本地并自动点击
function saveAs(data, name) {
    const urlObject = window.URL || window.webkitURL || window;
    const export_blob = new Blob([data]);
    const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    save_link.click();
}
// 下载含有url的文件
function downloadUrlFile(url, fileName) {
    const url2 = url.replace(/\\/g, '/');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url2, true);
    xhr.responseType = 'blob';
    //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
    // 为了避免大文件影响用户体验，建议加loading
    xhr.onload = () => {
        if (xhr.status === 200) {
            // 获取文件blob数据并保存
            saveAs(xhr.response, fileName);
        }
    };
    xhr.send();
}
downloadUrlFile(url, fileName);

最后编辑于：2021.09.28 08:53:17