Я'м, используя vuejs 2 + Аксиос. Мне нужно отправить GET запрос, пройти некоторые параметры на сервер, и получите PDF в качестве ответа. Сервер использует фреймворк Laravel.
Так
axios.get(`order-results/${id}/export-pdf`, { params: { ... }})
делает успешную заявку, но она не запускается скачивание силой, даже если сервер возвращает корректный заголовок.
Я думаю, что это типичная ситуация, когда вам нужно, скажем, форма отчета в формате PDF и передать какие-то фильтры на сервере. Так как это может быть достигнуто?
Обновление
Так что на самом деле я нашел решение. Однако тот же подход, что'т работать с Аксиос, Дон'т знаю почему, что's, почему я использовал объект сырые то 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
})
Вы'вновь становится пустым формате 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()
})
в
Попробуйте это: Он отлично работает для меня с совместимость с Internet Explorer 11 и (createObjectURL не't работа на Эксплорер 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
Я не'т думаю, что его можно сделать в "Аксиос" или даже "Аякс". Файл будет храниться в памяти, т. е. вы не можете сохранить файл на диск. Это потому что JavaScript не может взаимодействовать с диска. Это было бы серьезной проблемой безопасности, и он будет заблокирован во всех основных браузерах.
Вы можете построить свой URL-адрес и загрузить его следующим образом:
var url = 'http://example.com/order-results/' + id + '/export-pdf?' + '..params..'
window.open(url, '_blank');
Надеюсь, что это помогает!
Я пробовал некоторые из выше предложенных подходов, но в моем случае браузер посылает мне предупреждение всплывающего блока. Код описанный ниже работал для меня:
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();
});