使用爱可信强制下载GET请求

Question

我使用vuejs 2 +爱可信。我需要发送GET请求，通过一些PARAMS到服务器，并得到一个PDF作为响应。服务器使用Laravel。

所以

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

让成功的请求，但它没有启动力下载，即使服务器返回正确的标题。

我认为这是一个典型的情况，当你需要，比方说，形成一个PDF报告，并通过一些过滤器服务器。所以，怎么可能实现呢？

更新

所以实际上我找到了解决办法。但是同样的方法也没有与爱可信合作，不知道为什么，这就是为什么我用生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()
  }
}

重要提示：你应该有数组缓冲区为响应类型

然而，写在爱可信相同的代码返回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
})

Answer 1

你得到空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()
})

Answer 2

试试这个：它完美对我兼容性的Internet Explorer 11（createObjectURL不会对浏览器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

Answer 3

我不认为它可能在爱可信，甚至AJAX来做到这一点。该文件将被保存在内存中，即你无法将文件保存到磁盘。这是因为JavaScript不能与磁盘进行交互。这将是一个严重的安全问题，它被阻止在所有主流浏览器。

你可以构建你的URL在前端和下载的方式如下：

 var url = 'http://example.com/order-results/' + id + '/export-pdf?' + '..params..' 

 window.open(url, '_blank');

希望这可以帮助！

Answer 4

我尝试了一些上述建议的方法，但在我的情况下，浏览器是送我的弹出块警告。如下所述为我工作的代码：

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

Answer 5

我有类似的issues-我结束了创建的链接，并从那里下载。

我把如何更细节的answer另一个计算器问题。