>  기사  >  웹 프론트엔드  >  JavaScript를 사용하여 웹 서비스에서 반환된 이진 문자열에서 PDF 파일을 다운로드하는 방법은 무엇입니까?

JavaScript를 사용하여 웹 서비스에서 반환된 이진 문자열에서 PDF 파일을 다운로드하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-29 05:40:02580검색

How to Download a PDF File from a Binary String Returned by a Web Service Using JavaScript?

JavaScript를 사용하여 웹 서비스에서 반환된 바이너리 문자열에서 PDF 파일을 작성하는 방법

다음에서 PDF 파일을 렌더링하려고 할 때 발생합니다. Ajax 요청을 통해 수신된 바이너리 문자열입니다. Firefox 및 Internet Explorer 9와 같은 웹 브라우저는 data:uri 솔루션을 사용할 때 문제를 제기합니다.

문제

수신된 바이너리 문자열은 다음과 유사합니다.

%PDF-1.4....
.....
....hole data representing the file
....
%% EOF

시도한 솔루션

data:uri를 통해 데이터를 삽입하는 것은 Opera와 Chrome에서 효과적인 것으로 입증되었지만 Firefox와 Internet Explorer에서는 실패했습니다.

잠재적인 해결책

사용자 다운로드가 가능하도록 파일 시스템에 PDF 파일을 구축하는 것을 고려하십시오. 이 방법을 사용하려면 클라이언트 측 솔루션과 주요 브라우저와의 호환성이 필요합니다.

수정된 솔루션

XMLHttpRequest 응답 유형을 "blob"으로 수정하세요. 그런 다음 window.open 함수를 요소의 다운로드 속성으로 대체하세요. 이 프로세스는 XMLHttpRequest 응답을 ".pdf" 파일로 다운로드하기 시작합니다.

<code class="javascript">var request = new XMLHttpRequest();
request.open("GET", "/path/to/pdf", true); 
request.responseType = "blob";
request.onload = function (e) {
    if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // create `objectURL` of `this.response` : `.pdf` as `Blob`
        var file = window.URL.createObjectURL(this.response);
        var a = document.createElement("a");
        a.href = file;
        a.download = this.response.name || "detailPDF";
        document.body.appendChild(a);
        a.click();
        // remove `a` following `Save As` dialog, 
        // `window` regains `focus`
        window.onfocus = function () {                     
          document.body.removeChild(a)
        }
    };
};
request.send();</code>

위 내용은 JavaScript를 사용하여 웹 서비스에서 반환된 이진 문자열에서 PDF 파일을 다운로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.