使用axios强制下载GET请求

JavaScript

村村老丝

2020-03-11

我正在使用vuejs 2 + axios。我需要发送一个get请求,将一些参数传递给服务器,并获取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
})

第849篇《使用axios强制下载GET请求》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
神无村村 2020.03.11

我遇到了类似的问题-我最终创建了链接并从那里下载。

在另一个stackoverflow问题答案中提供了更多详细信息

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android