Base64는 바이너리 데이터를 네트워크를 통해 전송할 수 있도록 텍스트 형식으로 변환하는 데 일반적으로 사용되는 인코딩 방법입니다. PDF(Portable Document Format, Portable Document Format)는 문서를 제시하고 교환하는 데 사용되는 형식입니다.
JavaScript 프로그래밍에서는 브라우저에서 이러한 PDF 문서를 표시하거나 다운로드할 수 있도록 Base64로 인코딩된 데이터를 PDF 형식으로 변환해야 하는 경우가 있습니다. 이 기사에서는 JavaScript를 사용하여 Base64 인코딩을 PDF 형식으로 변환하는 방법을 설명합니다.
먼저 Base64로 인코딩된 데이터를 가져와야 합니다. 이는 백엔드 서버나 웹 API, 프런트엔드의 양식이나 사용자 상호 작용에서 데이터를 가져오는 등 다양한 방법으로 달성할 수 있습니다.
이 예에서는 base64Data라는 문자열 변수를 사용하여 Base64로 인코딩된 데이터를 나타냅니다. 다음은 이 데이터를 나타내는 샘플 코드입니다.
var base64Data = "JVBERi0xLjMKJcfs...";
다음으로 Base64로 인코딩된 데이터를 다시 바이너리 형식으로 변환해야 합니다. 이는 Base64로 인코딩된 문자열을 받아들이고 해당 문자열에 대한 이진 데이터를 나타내는 문자열을 반환하는 window.atob() 함수를 사용하여 달성할 수 있습니다.
다음은 Base64 데이터를 바이너리 형식으로 변환하는 샘플 코드입니다.
var binaryData = window.atob(base64Data);
다음으로, 변경할 수 없는 원시 데이터 파일과 같은 객체를 나타내는 Blob 객체를 생성해야 합니다. Blob 객체는 일반적으로 웹 애플리케이션의 AJAX 데이터 전송에 사용됩니다.
다음은 Blob 객체를 생성하는 샘플 코드입니다.
var blob = new Blob([binaryData], { type: "application/pdf" });
여기에서는 Blob 생성자에 배열 매개변수로 BinaryData 문자열을 전달합니다. 또한 MIME 유형을 "application/pdf"로 지정했는데, 이는 PDF 파일 형식으로 Blob 객체를 생성한다는 것을 나타냅니다.
Blob 객체를 생성한 후에는 브라우저 창을 통해 액세스할 수 있도록 이를 URL 형식으로 변환해야 합니다. window.URL.createObjectURL() 메소드를 사용하여 이 URL을 생성할 수 있습니다.
다음은 Blob 개체를 URL 형식으로 변환하는 샘플 코드입니다.
var url = window.URL.createObjectURL(blob);
이 코드는 Blob 개체를 나타내는 URL 문자열을 반환합니다.
이제 URL을 만들었으므로 HTML 페이지의 링크 요소에 링크하여 브라우저에서 이 PDF 파일을 표시하거나 다운로드할 수 있습니다.
다음은 PDF 파일을 HTML 페이지의 링크 요소에 연결하는 샘플 코드입니다.
var link = document.createElement('a'); link.href = url; link.download = "file.pdf"; link.click();
여기에서는 "link"라는 새 링크 요소를 만들고 해당 href 속성을 이전에 만든 URL로 설정했습니다. 또한 링크를 클릭할 때 파일을 다운로드할 수 있도록 다운로드 속성을 지정합니다. 마지막으로 link.click()을 사용하여 이 링크 요소를 클릭하면 브라우저에서 이 PDF 파일을 표시하거나 다운로드할 수 있습니다.
요약
이 기사에서는 JavaScript를 사용하여 Base64로 인코딩된 데이터를 PDF 형식으로 변환하고 이러한 PDF 파일을 브라우저에 표시하고 다운로드하는 방법을 소개했습니다. 이러한 단계에는 Base64 인코딩에서 데이터 가져오기, 데이터를 바이너리 형식으로 변환, Blob 객체 생성, ObjectURL 생성 및 HTML 페이지에 PDF 파일 연결이 포함됩니다. 이를 수행할 때 데이터 유형 유효성 검사, 오류 처리 및 보안과 같은 모범 사례를 따르십시오.
위 내용은 base64를 pdf로 자바스크립트로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!