React实现Post请求下载PDF文件的解决方案

react处理post请求的下载pdf功能

完整代码：

//下载

Down=(index)=>{

this.setState({

visible: true,

});

console.log(index.pdfPath);

const THIS=this;

axios.post(‘http://localhost:3006/archiveDocument/downLoadPdf’,

{

“path”: index.pdfPath

},

{responseType:‘blob’}

).then((data)=> {

let Data = eval(data);

if (Data.data.state === 0) {

console.log(Data.data.message);

}

else {

console.log(“成功”);

console.log(Data.data);

//创建链接

let URL = window.URL || window.webkitURL;

let objectUrl = URL.createObjectURL(Data.data);

let a = document.createElement(‘a’);

a.href = objectUrl;

a.download = index.pdfPath;

document.body.appendChild(a);

a.click();

a.remove();

}

})

.catch(function (error){

console.log(error);

});

首先第一个难点是在, {responseType:‘blob’},这个是将返回的二进制文件转换成blob对象，如果成功返回，则在下载请求的返回中能得到pdf开头的回应

在post请求在相应中能得到以上的以pdf开头的乱码后，这个下载功能就完成了一半了，剩下的问题就是将这个

就是如何将blob对象转换成下载链接，并且调用浏览器的下载部分，关键代码就是代码中的

//创建链接

let URL = window.URL || window.webkitURL;

let objectUrl = URL.createObjectURL(Data.data);

let a = document.createElement(‘a’);

a.href = objectUrl;

a.download = index.pdfPath;

document.body.appendChild(a);

a.click();

a.remove();

`