Я использую vuejs 2 + axios. Мне нужно отправить запрос на получение, передать некоторые параметры на сервер и получить 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()
}
}
Важно: вы должны иметь буфер массива в качестве типа ответа
Однако тот же код, написанный в 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
})