前言

项目年年有，下载天天见，今天就讲几种常见的下载方式和常见的小问题点，也许看到了几种场景后你的问题也解决了啊，哈哈

blob数据流形式下载

这也算是我们最常见的下载方式之一了，后台返回的数据流如下：

前端一般的下载方式如下：


// 常见的下载方法如下：
let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
const $link = document.createElement("a");
$link.href = URL.createObjectURL(blob);
$link.download = name;
//name:后台返回的文件名，比如：xx.xls xx.txt
$link.click();
document.body.appendChild($link);
document.body.removeChild($link); // 下载完成移除元素
window.URL.revokeObjectURL($link.href); // 释放掉blob对象

你会看到文件下载下来了，但是你有可能打不开文件或者打开的文件是乱码的

首先是乱码的的问题：

乱码的问题很大问题是因为返回的数据流格式有问题，一般都是修改请求头中的content-Type类型

headers: {'Content-Type': 'application/json;charset=utf-8'},

其次是下载之后打不开数据

打不开的很大原因是也数据的返回格式有问题，要对返回的数据进行blob形式限定

responseType: 'blob',

一般接口形式如下

export function doDown(url) {
    return axios.get(`${baseUrl}${url}`, {
        headers: {'Content-Type': 'application/json;charset=utf-8'},
        responseType: 'blob',
    })
}

let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}) 这行代码里有一个type，这个type我们一般是最好不要去添加，让系统去默认的匹配类型

坑点如果你下载的文件类型和你配置的type类型不一致，就会造成文件的损害打不开。

如果有同学非要去写type，网上有很多的参考类型如下：

base64类文件下载

一般base64的返回数据格式如下：

base64的下载转化为blob形式进行下载，一般代码如下：

//base64转blob
function base64ToBlob(code) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});

}

//base64文件下载下载
function base64DownloadFile(fileName, content) {
    let aLink = document.createElement("a");
    let blob = this.base64ToBlob(content);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.click();
}

注释： base64DownloadFile其实就是上面第一种方式的下载，这里有几个函数是针对于base64编码特定的函数。

window.open通过路径下载

只要后台给出路径，前端直接利用如下代码下载就行

window.open('文件路径', '', '')

前端的下载方式有很多，有时候打不开，有时候下载不了，一般下载不了就是函数有问题，打不开要么是数据的处理有问题，要么是请求头的配置有问题，希望大家都能不报错。

哦豁，前端下载你踩坑了吗

前言

blob数据流形式下载

base64类文件下载

window.open通过路径下载