H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】在vue里下载pdf文件打开文件后空白的问题

1.在做一个pdf导出功能的时候卡主了,是可以下载的,但是下载后的pdf文件打开是空白的,用postman测试下载后台的pdf文件是可以正常打开并且有内容的

2.下载代码:

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`//word文档为msword,pdf文档为pdf
            });
            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);
    })
}

图片描述

回答:

为方便我用fetch试了下,一点问题都没有。你把你的文件做个md5和源文件对比下是不是一样,你怕只是单纯的打不开pdf文件吧。

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` //word文档为msword,pdf文档为pdf
    });

    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);
});

回答:

为什么不通过a标签直接下载 而要用axios转一圈呢

回答:

遇到了同样等问题,请问是否找到了解决方案?

本文地址:H5W3 » 【Web前端问题】在vue里下载pdf文件打开文件后空白的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址