前端下载文件的几种方式

前端下载文件的几种方式

在网页需要下载文件功能时需要进行点击下载功能，下面列出几种常见文件下载的方式

1.直接下载

通过在浏览器地址栏输入相应下载url进行下载，本质为发送GET请求进行下载

2.利用a标签的download属性进行点击下载

<a href="完整下载地址">点击下载</a>

但是这样会有一个问题，就是下载是可以下载了，但是同样触发了a标签的页面跳转功能。

<a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>

3.使用location.href

后端接口为GET请求

Vue文件中自定义点击事件

<el-button @click="exportPassList">导出</el-button>

methods:

exportPassList() {
    let a =
        "/请求地址/请求地址/接口名称?参数=" +
        this.indexCode +
        "&参数=" +
        this.time
    location.href = a;
},

4.文件流方式

// 此种方式的优点是支持多文件下载、post下载、自定义文件名称，流程是向后端发送post请求，后端返回文件流，前端将文件流转成下载链接

// 原生js请求写法（不可以使用JQuery，因为JQuery不支持blob类型）
function download() {
    const req = new XMLHttpRequest();
    req.open('POST', '/download/excel', true);
    req.responseType = 'blob'; //如果不指定，下载后文件会打不开
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = function() {
        var content = req.getResponseHeader("Content-Disposition") ;
        // 文件名最好用后端返的Content-disposition
        // 需要后端设置 Access-Control-Expose-Headers: Content-disposition 使得浏览器将该字段暴露给前端
        var name = content && content.split(';')[1].split('filename=')[1];
        var fileName = decodeURIComponent(name)
        downloadFile(req.response,fileName)  // 调用将文件流转成文件的方法，后面有写
    };
    req.send( JSON.stringify(params));

}

// axios请求写法
function download() {
    axios({
        method: 'post',
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        url: '/robot/strategyManagement/analysisExcel',
        responseType: 'blob',
        headers: { //如果需要权限下载的话，加在这里
            Authorization: '123456'
        }
        data: JSON.stringify(params),
}).then(function(res){
    var content = res.headers['content-disposition'];
    var name = content && content.split(';')[1].split('filename=')[1];
    var fileName = decodeURIComponent(name)
    downloadFile(res.data,fileName)// 调用将文件流转成文件的方法，后面有写
}) 
}

例： get请求的文件流下载

download() {
    // 初始化参数
    axios.get("/xxx/xxx/export", {
        params: {
            pageSize: 10
            pageNo: 1,
        },
        responseType: "blob" // 1.首先设置responseType对象格式为 blob:
    }).then(res => {
        //resolve(res)
        // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
        let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
        });
        // 3.创建一个临时的url指向blob对象
        let url = window.URL.createObjectURL(blob);
        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
        let a = document.createElement("a");
        a.href = url;
        a.download = "导出数据_" + new Date().getTime() + ".xlsx"; //自定义导出文件名
        a.click();
        // 5.释放这个临时的对象url
        window.URL.revokeObjectURL(url);
        return _this.$message.success("导出成功");
    },
            err => {
        resolve(err.response);
    }
           )
}

...

..

.