前端开发Web 前端开发

文件流生成下载地址-(下载Excel)

2018-06-26  本文已影响0人  AlanV

title: 文件流生成下载地址-(下载Excel)
tags: JavaScript
categories: 项目笔记


文件流在前端生成地址,用于下载Excel(项目由vue+axios)

<The rest of contents | 余下全文>

对于后台返回API的config的配置

这里主要的是responseType: 'blob',其他不必过多纠结,而blob可以在MDN中查阅到

export const generateExcelWym = params => {
    return axios.post('/v1/api/fac-mission-prcd-nodes/generateExcel', params, {
        responseType: 'blob'
    });
};

文件流生成地址

    downLoad() {
        let params = {
            missionNodeId:this.instanceWorkflow.components.status.id,
            lathes:[this.bedNum],                    
        }
        generateExcelWym(params).then( res => {
            console.log(res);
            //当前这里的res.data则为后台返回的文件流
            this.fileData =res.data;
            //在这里利用则可以直接的生成作为下载用的url,但是在其他代码环境下,可能需要new一个Blob对象,例如
            //var blob = new Blob([JSON.stringify(res.data)], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
            let url = window.URL.createObjectURL(res.data);
            console.log(url);
            let a = window.document.createElement('a');
            a.setAttribute('href',url);
            a.setAttribute('download','生成唯一码文件.xls');
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        })
    },
上一篇 下一篇

猜你喜欢

热点阅读