JavaScript를 사용하여 다양한 브라우저의 웹 서비스 응답에서 PDF 파일을 안정적으로 다운로드하려면 어떻게 해야 합니까?

JavaScript의 웹 서비스 응답에서 PDF 문서 구성

웹 서비스에서 반환된 바이너리 문자열로 PDF 문서를 작성하면 브라우저 간 문제가 발생합니다. data-uri 방법은 Chrome 및 Opera와 같은 특정 브라우저에서는 효과적이지만 IE9 및 Firefox에서는 부족합니다.

대체 접근 방식: 클라이언트측 파일 다운로드

이러한 제한을 극복하기 위한 대체 접근 방식은 사용자 다운로드를 위해 파일 시스템에 PDF 파일을 생성하는 것입니다. 이를 수행하려면 다음을 고려하십시오.

응답 유형을 Blob으로 설정

XMLHttpRequest 객체의 responseType 속성을 "text" 대신 "blob"로 구성합니다. 이를 통해 클라이언트는 PDF 데이터를 Blob 개체로 받을 수 있습니다.

Blob 개체 활용

웹 서비스 요청에서 얻은 응답을 사용하여 새 Blob 개체를 생성합니다. .

개체 URL 생성

PDF 파일을 나타내는 Blob 개체에 대한 개체 URL을 생성합니다.

다운로드 만들기 링크

HTML 요소를 생성하고 해당 요소의 href 및 다운로드 속성을 설정합니다. href 속성은 객체 URL을 가리켜야 하고, 다운로드 속성은 파일 이름을 지정해야 합니다.

다운로드 트리거

문서 본문에 요소를 추가하세요. 파일 다운로드를 시작하려면 클릭하세요.

예제 코드

다음 JavaScript 코드는 이 접근 방식을 보여줍니다.

<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) {
        // Generate .pdf name as `Blob` from `this.response`
        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` after `Save As` dialog
        window.onfocus = function () {
            document.body.removeChild(a);
        };
    };
};
request.send();</code>

이 방법은 다음을 보장합니다. IE9, Firefox, Chrome, Opera 및 Safari를 포함한 여러 브라우저에서 안정적인 파일 다운로드가 가능합니다.

위 내용은 JavaScript를 사용하여 다양한 브라우저의 웹 서비스 응답에서 PDF 파일을 안정적으로 다운로드하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!