Axios requests to get the excel file, and as a result, the content in the excel is the content of the response body.

the requirement is that the page has a download function, and the downloaded target file is the excel file. I use axios to request the API. If the request is successful, I can get the excel file, but the content in the excel file is incorrect. The content in the excel is the response body content returned by the interface, a long string, not the correct excel content

.
export function getBlobRequest(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            responseType: "blob" //arraybuffer,blob,document,json,text,streamjson
        })
        .then(response => {
            resolve(response);
        })
        .catch(err => {
            console.log(``);
            Message.error({message: "!"});
            reject(err);
        })
    })
}

blob parsing code

if (!data) {
        return;
    }
    let head = data.headers["content-disposition"];
    let type = data.headers["content-type"];
    console.log(type)
    let url = window.URL.createObjectURL(new Blob([data.data], {type: type}));

    let fname = "";
    if (head) {
        try {
            fname = head.split(";")[2].split("=")[1];
            let reg = new RegExp(""","g");
            fname = fname.replace(reg, "");
        }catch (err){
            console.log("can not get pdf name");
        }

    }

    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", fname);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); //
    window.URL.revokeObjectURL(url); //blob

Apr.09,2021

the backend returns the address of excel, and you can download it


there is nothing wrong with the returned content of blob, (as long as there is nothing wrong with your program)
but blob is loaded by the browser and will not be downloaded locally by default. What you need to do is to write the blob locally. It is definitely not possible to write it directly, because of browser security restrictions, but there is still a workaround. Give a small example

.
var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

the above code builds a blob of a json file and downloads it.


requirements that have just been implemented. If you want to download with ajax instead of form form, Baidu searches for js-file-download

.
Menu