오픈소스 자바스크립트 PDF 뷰어 라이브러리
PDF 문서를 볼 수 있는 무료 오픈 소스 JavaScript 라이브러리입니다.
PDFObject란 무엇인가요?
PDFObject는 웹 페이지에 PDF 문서를 임베드하기 위해 개발된 무료 오픈 소스 JavaScript 라이브러리입니다. HTML 임베드 요소를 생성한 다음 HTML 구조에 통합하여 작동합니다. 그런 다음 임베드 요소가 PDF 문서를 렌더링합니다. PDFObject 자체는 렌더러가 아니며 임베드 요소를 생성하여 HTML 내에 배치하는 데 중점을 둡니다. PDF를 전체 크기 또는 웹 페이지의 지정된 섹션 내에 표시하기 위한 임베드 요소를 만들 수 있습니다.
PDFObject의 주요 기능은 다음과 같습니다.
- 폴백 메커니즘: PDFObject에는 폴백 메커니즘이 있으므로 브라우저가 PDF 내장을 지원하지 않는 경우 PDFObject가 자동으로 폴백 로직을 활성화하여 개발자가 필요에 따라 PDF에 대한 링크나 다른 대체 로직을 제공할 수 있습니다.
- PDF.js 통합: PDFObject는 PDF.js와의 선택적 통합을 제공하여 개발자가 브라우저의 기본 PDF 뷰어와 관계없이 PDF를 내장할 수 있도록 합니다. 이 기능은 브라우저가 HTML에 PDF 문서를 내장하는 것을 지원하지 않을 때 유용합니다.
- PDF Open Parameters: PDFObject는 Adobe의 독점적인 PDF Open Parameters를 지원하여 개발자가 PDF 표시에 대한 매개변수를 지정할 수 있도록 합니다. 여기에는 보기 모드 및 기타 Adobe 특정 설정과 같은 옵션이 포함됩니다. 이러한 모든 매개변수는 여기에서 찾을 수 있습니다.
PDFObject 시작하기
npm 모듈을 사용하여 PDFObject 라이브러리를 다운로드할 수 있습니다.
NPM을 사용하여 설치
npm i pdfobject
브라우저 지원 검증을 통해 HTML에 PDF 삽입
PDFObject 라이브러리를 사용하여 PDF 문서를 HTML에 포함할 수 있습니다. 먼저 PDFObject 라이브러리의 supportsPDFs 메서드를 사용하여 브라우저가 HTML에 PDF 문서를 포함하는 것을 지원하는지 확인합니다. HTML에 PDF를 포함하는 것을 지원한다는 것을 나타내는 true를 반환하면 embed("document_name.pdf","#elementid") 메서드를 사용하여 PDF를 HTML에 포함합니다. 이 함수는 PDF를 HTML의 특정 요소에 포함합니다. 전체 크기 PDF를 포함하는 경우 요소 ID를 언급하지 않고 embed("document_name.pdf")로 메서드를 호출합니다. 그러나 HTML에 PDF를 포함하는 것을 지원하지 않는다는 것을 나타내는 false를 반환하면 필요에 따라 다른 대체 논리로 이동합니다. 자세한 내용은 아래 코드 조각을 확인하세요.
산출
다음 출력은 HTML에 포함된 PDF 문서를 표시합니다.
폴백 메커니즘 생성
PDFObject를 사용하여 웹 페이지에 PDF를 임베드하는 동안 폴백 메커니즘을 설정할 수 있습니다. PDFObject는 브라우저가 HTML에 PDF를 임베드하는 것을 지원하지 않을 때 활성화됩니다. PDFObject는 embed 함수를 호출하는 동안 대체 논리를 포함하는 fallbackLink라는 매개변수를 활용합니다. 따라서 브라우저가 PDF 임베드를 지원하지 않으면 fallbackLink에 있는 코드가 지정된 div 요소에서 실행됩니다. 자세한 내용은 아래 코드 조각을 확인하세요.
산출
출력 스크린샷은 폴백 메커니즘에 의해 표시된 콘텐츠를 표시합니다. 폴백 메커니즘은 브라우저가 HTML에 PDF를 임베드하는 것을 지원하지 않을 때 활성화되었습니다.
Adobe의 PDF Open 매개변수를 사용하여 PDF 포함
PDFObject 라이브러리를 사용하여 일부 오프닝 매개변수와 함께 PDF를 임베드할 수 있습니다. PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) 메서드를 사용하여 오프닝 매개변수와 함께 PDF 문서를 HTML에 임베드합니다. 이 PDF 오픈 매개변수에는 PDF를 열고 특정 페이지 번호로 스크롤하는 기능이 포함됩니다. 자세한 내용은 아래 코드 조각을 확인하세요.
산출
다음 스크린샷은 HTML에 포함된 PDF 문서를 보여줍니다. 이 문서에는 렌더링 후 embed 요소가 페이지 번호 3으로 스크롤되도록 하는 추가 매개변수가 있습니다.
PDF.js를 통합하여 PDF를 내장하세요
알다시피 PDFObject는 HTML에 PDF를 내장하기 위해 브라우저의 지원에 의존하지만 브라우저가 지원하지 않는 경우 PDF를 렌더링하는 대체 방법을 제공합니다. 대체 방법은 PDF.js를 PDFObject와 통합하는 것입니다. 이를 위해 서버에 PDF.js를 설정한 다음 ForcePDFJS: true 및 PDFJS_URL: path/to/viewer.html/in/pdf.js 매개변수를 embed 함수에 전달해야 합니다.
참고: 아래 예제 코드 조각에서는 PDF.js 라이브러리를 포함하는 서버를 생성하고 시작했으므로 http://localhost:8888이 PDF.js 라이브러리를 가리킵니다.
산출
다음 스크린샷은 PDFObject를 PDF.js와 통합하여 렌더링된 PDF 문서를 보여줍니다.
결론
결론적으로, PDFObject는 HTML에 PDF 문서를 임베드하기 위한 사용하기 쉬운 JavaScript 라이브러리입니다. 렌더러로 기능하지 않고 임베드 요소에 대한 브라우저의 지원에 의존하기 때문에 임베드 요소를 지원하지 않는 브라우저에서 UI가 깨지는 등의 문제가 발생할 수 있지만, 라이브러리는 임베드 요소에 대한 지원 감지와 폴백 메커니즘을 통해 이러한 문제를 해결하는 기능을 제공합니다. PDF.js를 PDFObject와 통합하여 임베드 요소를 지원하지 않는 브라우저에서 PDF를 렌더링할 수도 있습니다. PDFObject는 한계가 있지만 웹 페이지에 PDF 문서를 임베드하고 렌더링하는 데 유용한 도구로 돋보입니다.
