使用 axios 强制下载 GET 请求 [英] Force download GET request using axios

问题描述

我正在使用 vuejs 2 + axios.我需要发送一个获取请求，将一些参数传递给服务器，然后获取一个 PDF 作为响应.服务器使用 Laravel.

I'm using vuejs 2 + axios. I need to send a get request, pass some params to server, and get a PDF as a response. Server uses Laravel.

所以

axios.get(`order-results/${id}/export-pdf`, { params: { ... }})

发出成功的请求，但它不会开始强制下载，即使服务器返回正确的标头.

makes successful request but it does not start force downloading, even though server returns correct headers.

我认为这是一种典型的情况，例如，您需要形成 PDF 报告并将一些过滤器传递给服务器.那么如何实现呢?

I think this is a typical situation when you need to, say, form a PDF report and pass some filters to server. So how could it be accomplished?

更新

所以实际上我找到了一个解决方案.但是同样的方法不适用于 axios，不知道为什么，这就是我使用原始 XHR 对象的原因.所以解决方案是创建一个blob对象和用户createUrlObject函数.示例:

So actually I found a solution. However the same approach didn't work with axios, don't know why, that's why I used raw XHR object. So the solution is to create a blob object and user createUrlObject function. Sample example:

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:

However, the same code written in axios returns PDF which is empty:

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

推荐答案

您的 PDF 为空，因为没有数据传递到服务器.您可以尝试使用这样的数据对象传递数据

You're getting empty PDF 'cause no data is passed to the server. You can try passing data using data object like this

  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 的提示.谢谢你:)

By the way I gotta thank you so much for showing me the hint in order to download pdf from response. Thank ya :)

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

这篇关于使用 axios 强制下载 GET 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！