相关疑难解决方法(0)

我正在使用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 …

尝试在我的NodeJS服务器上创建文件下载功能时,我遇到了一些意外的行为.我有一个REST(快速)API,它需要一些导出数据功能,它在服务器上创建一个CSV文件并用于res.download('path/to/file')触发下载.响应头包括

Content-Disposition:attachment; filename="indicators.csv"
Content-Length:30125
Content-Type:text/csv; charset=UTF-8

所以一切似乎都井然有序.

问题是,我从服务器得到的响应是纯文本.响应包含CSV文件包含的所有数据,但不会像我预期的那样触发浏览器的文件下载对话框.我在Chrome和FF上都试过了.两者都存在问题.

有任何想法吗？

更新

我设法通过创建一个虚拟表单,并使用其提交操作来进行我的AJAX调用来使其工作.但这是一个丑陋的黑客,我仍然在寻找一个更优雅的解决方案.