利用axois来下载档案

前言：

最近公司专案上刚好碰到制作汇出报表模组开发，而过往我都是透过form submit方式直接将参回抛给Controller，但当我列印发生问题时，我无法由前台正确得知我正确的错误讯息为何，因为我的错误讯息只会有一组Default文字。

而这次因为这个模组开发需要支援多国语系，因此在错误讯息方面
我就不能在前端hard code。我必须依照不同语系转换错误语言跟错误内容。所以就藉此来研究一下该如何透过axios来下载档案，并回传正确错误讯息。

原文同步发表於个人部落格

一、 前提：

下载档案时，Server会回抛资料串流。而一般axios未设定时，预设就为json格式。如果要下载档案就必须在回传型态指
{ responseType: 'blob' }才能正确接到资料!

二、接着，我们要判断下载资料是否为空，这是後我们可以透过下面这段程序码来判断

// 因为我的回传错误讯息内容的型态是json，所以假使我接到资料是json格式，及代表我汇出发生问题勒
if (res.headers["content-type"].includes("application/json")){
   //如果有错误讯息
}
else{
   
}

三、再来错误讯息部分，由於我们接到的型态是{ responseType: 'blob' } 所以我们必须将blob转回json字串，如此才能回抛错误讯息。

//1.先宣告取得blob型态
const blb = new Blob([res.data], { type: "json" });
let reader = new FileReader();
//3.完全读完才会进入
reader.onload = e => {
    if (e.target.readyState === 2) {
        let res = {};
        res = JSON.parse(e.target.result);
        if (res.Msg.indexOf("app.") !== -1) {
            alert(i18n.t(res.Msg));
        }
        else {
            alert(res.Msg);
        }
    }
};
//2.再将blb型态读出来
reader.readAsText(blb);

四、最後，则是档案汇出的档名跟汇出方式

const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
link.href = url;

//透过decodeURI 将UTF-8转码 
const fileName = decodeURI(res.headers["content-disposition"].split(" ")[1].replace("filename*=UTF-8''", ""));

link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();

五、完整程序码如下

axios.post(url, postData, { responseType: 'blob' }).then((res, fileName) => {
        if (res.headers["content-type"].includes("application/json")) {
            //1.先宣告取得blob型态
            const blb = new Blob([res.data], { type: "json" });
            let reader = new FileReader();
            //3.完全读完才会
            reader.onload = e => {
                if (e.target.readyState === 2) {
                    let res = {};
                    res = JSON.parse(e.target.result);
                    if (res.Msg.indexOf("app.") !== -1) {
                        alert(i18n.t(res.Msg));
                    }
                    else {
                        alert(res.Msg);
                    }
                }
            };
            //2.再将blb型态读出来
            reader.readAsText(blb);
        }
        else {
            const url = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.href = url;
            const fileName = decodeURI(res.headers["content-disposition"].split(" ")[1].replace("filename*=UTF-8''", ""));
            link.setAttribute('download', fileName);
            document.body.appendChild(link);
            link.click();
            //document.removeChild('a');
        }


    }).catch((error) => {
        if (error.response) {
            alert(error.response.data);
        } else {
            alert(error.message);
        }
    });

参考资料：
Convert Blob to String in JavaScript

用Javascript替中文网址转码

axios设置responseType===blob导出文件和失败返回json处理

Blob-MDN

使用axios如何下载文件