从请求响应创建PDF不适用于axios，但适用于原生xhr

yi0zb3m4 于 2023-01-13 发布在 iOS

关注(0)|答案(4)|浏览(145)

为了强制从服务器下载PDF，我尝试使用axios和原生xhr对象。原因是我必须发送post请求，因为我传递了太多的数据到服务器，所以简单链接的选项（如site.ru/download-pdf不适合我）。
即使我最终设法用Xhr做到了这一点，我仍然不知道为什么axios方法不起作用。
下面是我如何使用xhr实现这一点，它对我很有效：

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

    xhr.send("data=" + data);

这里是“axios-way”，我实际上得到了正确页数的PDF，但它们都是空的：

axios.post(`order-results/${id}/export-pdf`, {
      data,
      responseType: 'arraybuffer'
    }).then((response) => {
      let blob = new Blob([response.data], { type:"application/pdf" })
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = 'Results.pdf'
      link.click()
    })

Axios已配置为发送授权令牌。我将Application/x-www-form-urlencoded放在xhr中，因为否则我无法在服务器端获取数据。
即使xhr可以工作，我还是更喜欢使用axios，因为我在任何地方都使用它，我只是好奇我做错了什么，我尝试了不同的解决方案，只有原生的xhr可以完成这项工作。

axios

来源：https://stackoverflow.com/questions/43688950/creating-pdf-from-request-response-doesnt-work-with-axios-but-works-in-native-x

4条答案

按热度按时间

2izufjch1#

以下是我的工作：

axios.post("http://localhost:8080/reports/my-report/",
        data,
        {
            responseType: 'arraybuffer',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/pdf'
            }
        })
        .then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'file.pdf'); //or any other extension
            document.body.appendChild(link);
            link.click();
        })
        .catch((error) => console.log(error));

如果有帮助就告诉我。
干杯！

赞(0）回复(0）举报 2023-01-13

4dbbbstv2#

无论出于什么原因，pdf正在下载，但传递的任何内容都没有出现，导致一个空白的pdf。
我发现这个代码片段是类似的，但结果在一个pdf格式的内容。

axios({
                url: '/pdf',
                method: 'GET',
                responseType: 'blob', // important
            }).then((response) => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'file.pdf');
                document.body.appendChild(link);
                link.click();
            });

有一些反馈说它在IE11上不起作用，我还没有测试过它，但是使用FileSaver.js发布了一个解决方案

axios({
            url: '/pdf',
            method: 'GET',
            responseType: 'blob', // important
        }).then((response) => {
            FileSaver.saveAs(new Blob([response.data]));
        });

赞(0）回复(0）举报 2023-01-13

jljoyd4f3#

有一个特殊的响应类型：“斑点”：

axios.post(`order-results/${id}/export-pdf`, {
  data,
  responseType: 'blob'
}).then((response) => {
  let link = window.URL.createObjectURL(blob)
  link.download = 'Results.pdf'
  link.click()
})

也可以使用window.open方法：

axios.post(`order-results/${id}/export-pdf`, {
  data,
  responseType: 'blob'
}).then((response) => {
  window.open(URL.createObjectURL(response.data));
})

赞(0）回复(0）举报 2023-01-13

8wigbo564#

您得到的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();
});

赞(0）回复(0）举报 2023-01-13

我来回答

从请求响应创建PDF不适用于axios，但适用于原生xhr

4条答案

相关问题

热门标签

最新问答