The problem of blank after downloading pdf file in vue

1. When doing a pdf export function, the card owner can be downloaded, but the downloaded pdf file is blank. Using the postman test to download the background pdf file can be opened normally and has content

2. Download code:

downLoadResume(){
    axios.post("url",{
        responseType: "arraybuffer"
    }).then((res)=>{
        console.log(res);
        if(res.status == 200){
            let blob = new Blob([res.data], {
                type: `application/pdf;charset-UTF-8`//wordmsword,pdfpdf
            });
            let objectUrl = URL.createObjectURL(blob);
            console.log(objectUrl);
            let downEle = document.createElement("a");
            let fname = `download`; //
            downEle.href = objectUrl;
            downEle.setAttribute("download", fname);
            document.body.appendChild(downEle);
            downEle.click();
        }
        // fileDownload(res.data,"resume.pdf")
    }).catch((err)=>{
        console.log(err);
    })
}

Pdf-Export vue.js javascript

May.24,2021

I tried fetch for my convenience, and there was no problem at all. If you make a md5 of your file and compare it with the source file, you are afraid that you simply can't open the pdf file.

fetch('http://60.10.25.240/api/common/UEditorDownload?suburl=ueditor/upload/file/20180802/1533197094431007371.pdf').then(function(response) {
    if (response.ok) {
        return response.arrayBuffer();
    }
    throw new Error('Network response was not ok.');
}).then(function(arraybuffer) {
    let blob = new Blob([arraybuffer], {
        type: `application/pdf;charset-UTF-8` //wordmsword,pdfpdf
    });

    let objectURL = URL.createObjectURL(blob);

    let downEle = document.createElement("a");
    let fname = `download`; //
    downEle.href = objectURL;
    downEle.setAttribute("download", fname);
    document.body.appendChild(downEle);
    downEle.click();
}).catch(function(error) {
    console.log('There has been a problem with your fetch operation: ', error.message);
});

Why not download directly through a tag and use axios to turn around?

encountered the same problem. Have you found a solution?

Previous: Vue cancels the question.

Next: Can Mybatis return a Map collection with attribute values-> attribute values?