РЕШЕНИЕ:
Должные кредиты отправляются @Sagar, чтобы указать мне правильное направление.
Код выше был верным.Чего не хватало, так это добавления правильных responseType как arraybuffer.
. Я испугался этих ???? в ответе, и это вводило меня в заблуждение.Эти вопросительные знаки были в порядке, так как pdf является двоичными данными и предназначен для чтения надлежащим читателем.
Массив:
И массив буферов точно используется длясохраняйте двоичные данные.
Это определение с веб-сайта mozilla:
Объект ArrayBuffer используется для представления общего буфера исходных двоичных данных фиксированной длины.Вы не можете напрямую манипулировать содержимым ArrayBuffer;вместо этого вы создаете один из объектов типизированного массива или объект DataView, который представляет буфер в определенном формате, и используете его для чтения и записи содержимого буфера.
И ResponseTypeСтрока указывает тип ответа.Сказав свой массив буферов, он затем обрабатывает данные соответствующим образом.
И просто добавив responseType, мне удалось правильно загрузить файл PDF.
КОД:
Это исправленный код Vue (точно так же, как и раньше, но с добавлением responseType):
downloadFile() {
this.$http.get(this.appApiPath + '/testpdf', {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 = 'test.pdf'
link.click()
})
}
РЕДАКТИРОВАТЬ:
Этоболее полное решение, учитывающее поведение других браузеров:
downloadContract(booking) {
this.$http.get(this.appApiPath + '/download_contract/' + booking.id, {responseType: 'arraybuffer'})
.then(response => {
this.downloadFile(response, 'customFilename')
}, response => {
console.warn('error from download_contract')
console.log(response)
// Manage errors
}
})
},
downloadFile(response, filename) {
// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
var newBlob = new Blob([response.body], {type: 'application/pdf'})
// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(newBlob)
return
}
// For other browsers:
// Create a link pointing to the ObjectURL containing the blob.
const data = window.URL.createObjectURL(newBlob)
var link = document.createElement('a')
link.href = data
link.download = filename + '.pdf'
link.click()
setTimeout(function () {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(data)
}, 100)
},