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?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b374eb-2c090.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b374eb-2c090.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?