后台返回文件流，前端实现文件下载（excel或文档）

blob导出excel单个文件

downloadExcelBlob(url,params,type,callback) {
    _http({
        method: type,
        url: url,
        data:params,//post请求 
        // params,//get请求
        responseType: "blob"
    }).then(
        res => {
            var json = res.data;
            var type = json.type;
                if(res){
                    const content = res.data;
                    const blob = new Blob([content], {
                        type: "application/vnd.ms-excel"
                    });
                    let filenameStr=res.headers["content-disposition"].split(';')[1].trim();
                    let filename = decodeURIComponent(filenameStr.split('=')[1].split('.')[0]);
                    if ("download" in document.createElement("a")) {
                        const elink = document.createElement("a");
                        elink.download = filename;
                        //判断edge浏览器下载
                        if('msSaveOrOpenBlob' in navigator){
                            window.navigator.msSaveOrOpenBlob(blob,filename+'.xlsx' );
                        }
                        elink.style.display = "none";
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href);
                        document.body.removeChild(elink);
                    } else {
                        navigator.msSaveBlob(blob, filename+'.xlsx');
                    }
                    callback && callback()
                }
                
        },
        response => {
            utils.alert("文件下载失败，请重新操作");
            callback1 && callback1()
        }
        )
        .catch(response => {
            utils.alert("文件下载失败，请重新操作");
            callback1 && callback1()
        });
},

blob多文件下载

downloadFileMore(method,url,params,callback1){
    _http({
        method,
        url,
        data: params,//post请求
        responseType: "blob"
      })
        .then(
          res => {
            if(res){
                const content = res.data;
                let filenameStr=res.headers["content-disposition"].split(';')[1].trim();
                let prefix = decodeURIComponent(filenameStr.split('=')[1].split('.')[0]);
                const blob = new Blob([content],{type:"application/zip"});
                const fileName=prefix;
                if ("download" in document.createElement("a")){
                    const elink = document.createElement("a");
                    elink.download = fileName;
                    //判断edge浏览器下载
                    if('msSaveOrOpenBlob' in navigator){
                        window.navigator.msSaveOrOpenBlob(blob,fileName+'.zip' );
                    }
                    elink.style.display = "none";
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    URL.revokeObjectURL(elink.href);
                    document.body.removeChild(elink);
                }else {
                    navigator.msSaveBlob(blob, fileName+'.zip');
                }
                callback && callback()
            }
          },
          res => {
            utils.alert('文件下载失败，请重新操作');
            callback && callback()
          }
        )
        .catch(function(res) {
            utils.alert('文件下载失败，请重新操作');
            callback && callback()
        });
},

pdf文件下载

downloadpdfFile(method,url,params){
    _http({
        method,
        url,
        params,
        responseType: "blob"
      })
        .then(
          res => {
            if(res){
                const content = res.data;
                let filenameStr=res.headers["content-disposition"].split(';')[1].trim();
                let prefix = decodeURIComponent(filenameStr.split('=')[1].split('.')[0]);
                const blob = new Blob([content],{type:"application/pdf"});
                const fileName=prefix;//单纯的是文件名，不带后缀，在前端写死
                if ("download" in document.createElement("a")){
                    const elink = document.createElement("a");
                    elink.download = fileName;
                    //判断edge浏览器下载
                    if('msSaveOrOpenBlob' in navigator){
                        window.navigator.msSaveOrOpenBlob(blob,fileName+'.pdf' );
                    }
                    elink.style.display = "none";
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    URL.revokeObjectURL(elink.href);
                    document.body.removeChild(elink);
                }else {
                    navigator.msSaveBlob(blob, fileName+'.pdf');
                }
            }
          },
          res => {
            utils.alert('文件下载失败，请重新操作');
          }
        )
        .catch(function(res) {
            utils.alert('文件下载失败，请重新操作');
        });

万能下载(xls,xlsx,pdf,ppt,pptx,zip,doc,docx…)

downloadFile(method,url,params,callback){
    _http({
        method,
        url,
        data: params,//post请求
        responseType: "blob"
      })
        .then(
          res => {
            if(res){
                const content = res.data;
                let filenameStr=res.headers["content-disposition"].split(';')[1].trim();
                let prefix = decodeURIComponent(filenameStr.split('=')[1]);
                const blob = new Blob([content], {
				    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
				});
                const fileName=prefix;//带文件后缀的文件名
                if ("download" in document.createElement("a")){
                    const elink = document.createElement("a");
                    elink.download = fileName;
                    //判断edge浏览器下载
                    if('msSaveOrOpenBlob' in navigator){
                        window.navigator.msSaveOrOpenBlob(blob,fileName );
                    }
                    elink.style.display = "none";
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    URL.revokeObjectURL(elink.href);
                    document.body.removeChild(elink);
                }else {
                    navigator.msSaveBlob(blob, fileName);
                }
                callback && callback()
            }
          },
          res => {
            utils.alert('文件下载失败，请重新操作');
            callback1 && callback1()
          }
        )
        .catch(function(res) {
            utils.alert('文件下载失败，请重新操作');
            callback && callback()
        });
}

总结：

看完这几块代码我们会发现，主要是new Blob时的type不同，大家可以最后封装成一个方法，在这里我只写不同之处

//万能
const blob = new Blob([content], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
//xls、xlsx
const blob = new Blob([content], {
    type: "application/vnd.ms-excel"
});
//pdf
const blob = new Blob([content], {
    type: "application/pdf"
});
//zip
const blob = new Blob([content], {
    type: "application/zip"
});