나는'm 를 사용하여 vuejs2+날개로 연기 드리프트 같이하지만. 필요를 보내는 get 요청,통과 params 하는 서버,그리고 얻을 PDF 로 응답합니다. 서버가 사용하는 Laravel.
그래서
axios.get(`order-results/${id}/export-pdf`, { params: { ... }})
게 성공을 요청 하지만 그것이 시작되지 않는 힘을 다운로드,더라도 서버에서 반환하는 올바른 헤더가 있습니다.
내 생각에 이것은 일반적인 상황이 필요할 때,말,양식 PDF 보고서 및 통과하는 필터를 서버입니다. 그래서 어떻게 그것이 이루어집니까?
업데이트
그래서 실제로 나는 솔루션을 찾았습니다. 그러나 같은 방법 안't 과 함께 작업 날개로 연기 드리프트 같이하지만,don't know why,는'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()
}
}
Important:당신이 있어야 한 배열의 버퍼에 대한 응답으로 입력
그러나,동일 코드로 작성 날개로 연기 드리프트 같이하지만 반환합 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
})
You'다시 얻고 빈 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 파일을 다운로드하려면에서 반응이다. Ya 감사합니다:)
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()
})
이것을 보십시오: 그것은 작품이 나를 위해 완벽하게 호환성을 위해 인터넷 익스플로러 11(createObjectURL 지 않't 에서 작동 Explorer11)
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
I don't 한 이렇게 날개로 연기 드리프트 같이하지만 또는 AJAX. 파일을 메모리에 저장됩,즉,당신은 파일을 저장할 수 없습니다는 디스크에 있습니다. 이 때문에 JavaScript 상호 작용할 수 없습으로 디스크에 있습니다. 는 것에 심각한 보안 문제를 차단하는 모든 주요 브라우저에서.
을 구성할 수 있습니다 당신의 URL 에서 프런트 엔드 및 다운로드 방법은 다음과 같습니다.
var url = 'http://example.com/order-results/' + id + '/export-pdf?' + '..params..'
window.open(url, '_blank');
Hope this helps!
나의 어떤 위의 제안된 접근 하지만 제 경우에는 브라우저 나를 보내는 팝업 차단 경고입니다. 코드 설명 아래 나를 위해 일했:
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();
});