[JQUERY] JQuery와 아약스를 사용하여 PDF 파일 다운로드

JQuery와 아약스를 사용하여 PDF 파일 다운로드

해결법

1. ---

   1.jQuery를이 아직 일부 HTML5 XHR v2의 기능을 구현하지 않는 한, AJAX 요청을 사용하여 이진 데이터를로드하는 몇 가지 문제를 가지고이 개선 요청이 설명을 참조하십시오

   jQuery를이 아직 일부 HTML5 XHR v2의 기능을 구현하지 않는 한, AJAX 요청을 사용하여 이진 데이터를로드하는 몇 가지 문제를 가지고이 개선 요청이 설명을 참조하십시오

   당신은 두 가지 솔루션 중 하나가 있음을 감안할 때 :

   첫 번째 솔루션, JQuery와 사용을 포기하는 XMLHTTPRequest

   네이티브 XMLHttpRequest 객체 이동, 여기 당신이 필요로 할 수있는 코드는

     var req = new XMLHttpRequest();
     req.open("GET", "/file.pdf", true);
     req.responseType = "blob";
   
     req.onload = function (event) {
       var blob = req.response;
       console.log(blob.size);
       var link=document.createElement('a');
       link.href=window.URL.createObjectURL(blob);
       link.download="Dossier_" + new Date() + ".pdf";
       link.click();
     };
   
     req.send();
   

   두 번째 솔루션은, JQuery와 - 아약스 - 기본 플러그인을 사용

   플러그인은 여기에서 찾을 수 있습니다 및 JQuery와에 누락 XHR V2 기능을 사용할 수 있습니다, 여기를 사용하는 방법 샘플 코드는

   $.ajax({
     dataType: 'native',
     url: "/file.pdf",
     xhrFields: {
       responseType: 'blob'
     },
     success: function(blob){
       console.log(blob.size);
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download="Dossier_" + new Date() + ".pdf";
         link.click();
     }
   });
   

2. ---

   2.저는 초보자이고 대부분의 코드는 구글 검색에서입니다. 나는 (시행 착오 재생) 아래의 코드 내 PDF 다운로드 작업을 얻었다. 위의 코드 팁 (xhrFields)에 감사드립니다.

   저는 초보자이고 대부분의 코드는 구글 검색에서입니다. 나는 (시행 착오 재생) 아래의 코드 내 PDF 다운로드 작업을 얻었다. 위의 코드 팁 (xhrFields)에 감사드립니다.

   $.ajax({
               cache: false,
               type: 'POST',
               url: 'yourURL',
               contentType: false,
               processData: false,
               data: yourdata,
                //xhrFields is what did the trick to read the blob to pdf
               xhrFields: {
                   responseType: 'blob'
               },
               success: function (response, status, xhr) {
   
                   var filename = "";                   
                   var disposition = xhr.getResponseHeader('Content-Disposition');
   
                    if (disposition) {
                       var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                       var matches = filenameRegex.exec(disposition);
                       if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                   } 
                   var linkelem = document.createElement('a');
                   try {
                                              var blob = new Blob([response], { type: 'application/octet-stream' });                        
   
                       if (typeof window.navigator.msSaveBlob !== 'undefined') {
                           //   IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                           window.navigator.msSaveBlob(blob, filename);
                       } else {
                           var URL = window.URL || window.webkitURL;
                           var downloadUrl = URL.createObjectURL(blob);
   
                           if (filename) { 
                               // use HTML5 a[download] attribute to specify filename
                               var a = document.createElement("a");
   
                               // safari doesn't support this yet
                               if (typeof a.download === 'undefined') {
                                   window.location = downloadUrl;
                               } else {
                                   a.href = downloadUrl;
                                   a.download = filename;
                                   document.body.appendChild(a);
                                   a.target = "_blank";
                                   a.click();
                               }
                           } else {
                               window.location = downloadUrl;
                           }
                       }   
   
                   } catch (ex) {
                       console.log(ex);
                   } 
               }
           });
   

3. ---

   3.당신은 아주 쉽게 HTML5하여이 작업을 수행 할 수 있습니다 :

   당신은 아주 쉽게 HTML5하여이 작업을 수행 할 수 있습니다 :

   var link = document.createElement('a');
   link.href = "/WWW/test.pdf";
   link.download = "file_" + new Date() + ".pdf";
   link.click();
   link.remove()
   

4. ---

   4.좀 더 현대적인 접근 방법을 찾고있는 사람들을 위해, 당신은이 API를 가져올 수 있습니다. 다음 예제 프로그램에서는 PDF 파일을 다운로드합니다. 그것은 쉽게 다음 코드로 이루어집니다.

   좀 더 현대적인 접근 방법을 찾고있는 사람들을 위해, 당신은이 API를 가져올 수 있습니다. 다음 예제 프로그램에서는 PDF 파일을 다운로드합니다. 그것은 쉽게 다음 코드로 이루어집니다.

   fetch(url, {
       body: JSON.stringify(data),
       method: 'POST',
       headers: {
           'Content-Type': 'application/json; charset=utf-8'
       },
   })
   .then(response => response.blob())
   .then(response => {
       const blob = new Blob([response], {type: 'application/pdf'});
       const downloadUrl = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = downloadUrl;
       a.download = "file.pdf";
       document.body.appendChild(a);
       a.click();
   })
   

   나는이 방법은 다른 XMLHttpRequest의 솔루션보다 훨씬 쉽게 이해할 수 믿습니다. 또한, 추가 라이브러리를 추가 할 필요없이, JQuery와 접근 방식과 유사한 구문을 가지고있다.

   물론, 당신이 새로운 접근 방식 때문에, 개발하고있는 브라우저 IE에서 작동을하지 않습니다 확인 권합니다. 다음 [링크]의 전체 브라우저 호환성 목록 [1]을 찾을 수 있습니다.

   중요 :이 예에서 나는 지정된 URL의 서버 듣기에 JSON 요청을 전송하고 있습니다. 이 URL은 내 예에 나는 당신이이 부분을 알고 가정하고, 설정해야합니다. 또한, 작업에 대한 귀하의 요청에 필요한 헤더를 고려한다. 내가 JSON을 보내고 있기 때문에, 나는 Content-Type 헤더를 추가하고 응용 프로그램 / JSON으로 설정해야합니다; 문자셋 = UTF-8, 서버가 수신 할 요청의 유형을 알 수 있도록한다.

from https://stackoverflow.com/questions/34586671/download-pdf-file-using-jquery-ajax by cc-by-sa and MIT license