我正在使用vuejs 2 + axios。 我需要发送一个get请求,将一些params传递给服务器,并获得一个PDF作为响应。服务器使用Laravel。
所以
axios.get(`order-results/${id}/export-pdf`, { params: { ... }})
成功请求,但即使服务器返回正确的标题,它也不会开始强制下载。
我认为这是一种典型情况,例如,您需要形成PDF报告并将一些过滤器传递给服务器。那怎么可能实现呢?
更新
所以实际上我找到了一个解决方案。然而同样的方法不适用于axios,不知道为什么,这就是我使用原始XHR对象的原因。所以解决方案是创建一个blob对象和用户createUrlObject
函数。示例示例:
let xhr = new XMLHttpRequest()
xhr.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true)
xhr.setRequestHeader("Authorization", 'Bearer ' + this.token())
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.responseType = 'arraybuffer'
xhr.onload = function(e) {
if (this.status === 200) {
let blob = new Blob([this.response], { type:"application/pdf" })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'Results.pdf'
link.click()
}
}
重要提示:您应该将数组缓冲区作为响应类型
但是,在axios中编写的相同代码返回的PDF为空:
axios.post(`order-results/${id}/export-pdf`, {
data,
responseType: 'arraybuffer'
}).then((response) => {
console.log(response)
let blob = new Blob([response.data], { type: 'application/pdf' } ),
url = window.URL.createObjectURL(blob)
window.open(url); // Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
})
答案 0 :(得分:44)
您将获得空白PDF'因为没有数据传递到服务器。您可以尝试使用像这样的数据对象传递数据
axios
.post(`order-results/${id}/export-pdf`, {
data: {
firstName: 'Fred'
},
responseType: 'arraybuffer'
})
.then(response => {
console.log(response)
let blob = new Blob([response.data], { type: 'application/pdf' }),
url = window.URL.createObjectURL(blob)
window.open(url) // Mostly the same, I was just experimenting with different approaches, tried link.click, iframe and other solutions
})

顺便说一句,我非常感谢你向我展示了从响应中下载pdf的提示。谢谢你:)
var dates = {
fromDate: 20/5/2017,
toDate: 25/5/2017
}
我使用的方式是,
axios({
method: 'post',
url: '/reports/interval-dates',
responseType: 'arraybuffer',
data: dates
}).then(function(response) {
let blob = new Blob([response.data], { type: 'application/pdf' })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'Report.pdf'
link.click()
})

答案 1 :(得分:8)
试试这个: 它兼容Internet Explorer 11(createObjectURL在Explorer 11上不起作用)对我来说非常适合
axios({
url: 'http://vvv.dev',
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
if (!window.navigator.msSaveOrOpenBlob){
// BLOB NAVIGATOR
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'download.pdf');
document.body.appendChild(link);
link.click();
}else{
// BLOB FOR EXPLORER 11
const url = window.navigator.msSaveOrOpenBlob(new Blob([response.data]),"download.pdf");
}
});
https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743
答案 2 :(得分:4)
我认为在axios甚至AJAX中都不可能这样做。该文件将保留在内存中,即您无法将文件保存到磁盘。这是因为JavaScript无法与磁盘进行交互。这将是一个严重的安全问题,并且在所有主流浏览器中都被阻止。
您可以在前端构建网址,并按以下方式下载:
var url = 'http://example.com/order-results/' + id + '/export-pdf?' + '..params..'
window.open(url, '_blank');
希望这有帮助!
答案 3 :(得分:1)
我尝试了上述建议的一些方法,但就我而言,浏览器向我发送了弹出窗口阻止警告。 下面描述的代码对我有用:
axios.get(url, {responseType: 'arraybuffer'})
.then(function (response) {
var headers = response.headers();
var blob = new Blob([response.data],{type:headers['content-type']});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Your_file_name";
link.click();
});
答案 4 :(得分:0)
我有类似的问题 - 我最终创建了链接并从那里下载。
我在answer中详细介绍了另一个stackoverflow问题。
答案 5 :(得分:0)
此代码对我有用:
let xhr = new XMLHttpRequest()
xhr.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true)
xhr.setRequestHeader("Authorization", 'Bearer ' + this.token())
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.responseType = 'arraybuffer'
xhr.send()
xhr.onload = function(e) {
if (this.status === 200) {
let blob = new Blob([this.response], { type:"application/pdf" })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'Results.pdf'
link.click()
}
}