힘을 다운로드를 얻을 사용하여 요청을 날개로 연기 드리프트 같이하지만

나는'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
})
zvadym
편집된 질문15일 10월 2018 в 8:05
프로그래밍
javascript vue.js vuejs2 axios
16일 4월 2017 в 1:42
아직 보기가 없습니다.
질문에 대한 의견 (5)
해결책

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()
})
zvadym
편집된 답변16일 10월 2018 в 8:40
해설 (2)

이것을 보십시오: 그것은 작품이 나를 위해 완벽하게 호환성을 위해 인터넷 익스플로러 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

gtamborero
편집된 답변12일 4월 2018 в 9:38
해설 (0)

I don't 한 이렇게 날개로 연기 드리프트 같이하지만 또는 AJAX. 파일을 메모리에 저장됩,즉,당신은 파일을 저장할 수 없습니다는 디스크에 있습니다. 이 때문에 JavaScript 상호 작용할 수 없습으로 디스크에 있습니다. 는 것에 심각한 보안 문제를 차단하는 모든 주요 브라우저에서.

을 구성할 수 있습니다 당신의 URL 에서 프런트 엔드 및 다운로드 방법은 다음과 같습니다.

 var url = 'http://example.com/order-results/' + id + '/export-pdf?' + '..params..' 

 window.open(url, '_blank');

Hope this helps!

해설 (2)

나의 어떤 위의 제안된 접근 하지만 제 경우에는 브라우저 나를 보내는 팝업 차단 경고입니다. 코드 설명 아래 나를 위해 일했:

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

나는 유사한 문제가 끝났을 만드는 링크를 다운로드습니다.

나는 더 많은 정보는 방법에 답변]1에 또 다른 유래 질문입니다.

해설 (0)