오픈 소스 JavaScript PDF 뷰어 라이브러리

PDFObject란 무엇입니까?

PDFObject는 웹 페이지에 PDF 문서를 삽입하기 위해 개발된 무료 오픈 소스 JavaScript 라이브러리입니다. HTML 포함 요소를 생성한 다음 이를 HTML 구조에 통합하는 방식으로 작동합니다. 그러면 embed 요소가 PDF 문서를 렌더링합니다. PDFObject는 렌더러 자체가 아닙니다. 오히려 embed 요소를 생성하고 HTML 내에 배치하는 데 중점을 둡니다. PDF를 전체 크기로 표시하거나 웹 페이지의 지정된 섹션 내에 표시하기 위한 포함 요소를 생성할 수 있습니다.

다음은 PDFObject의 주요 기능 중 일부입니다:

• 대체 메커니즘: PDFObject에는 대체 메커니즘이 있으므로 브라우저가 PDF 삽입을 지원하지 않는 경우 PDFObject는 자동으로 대체 논리를 활성화하여 개발자가 필요에 따라 PDF에 대한 링크나 다른 대체 논리를 제공할 수 있도록 합니다. .
• PDF.js 통합: PDFObject는 PDF.js와의 선택적 통합을 제공하므로 개발자는 브라우저의 기본 PDF에 관계없이 PDF를 삽입할 수 있습니다. 뷰어. 이 기능은 브라우저가 HTML에 PDF 문서 포함을 지원하지 않을 때 유용합니다.
• PDF 열기 매개변수: PDFObject는 개발자가 PDF 표시에 대한 매개변수를 지정할 수 있도록 하는 Adobe의 독점 PDF 열기 매개변수를 지원합니다. 여기에는 보기 모드 및 기타 Adobe 관련 설정과 같은 옵션이 포함됩니다. 이러한 매개변수는 모두 여기에서 확인할 수 있습니다.

GitHub 통계

이름:
언어:
별:
포크:
특허:
저장소가 마지막으로 업데이트된 시간:

PDFObject 시작하기

npm 모듈을 사용하여 PDFObject 라이브러리를 다운로드할 수 있습니다.

npm i pdfobject

브라우저 지원 확인을 통해 HTML에 PDF 포함

PDFObject 라이브러리를 사용하여 PDF 문서를 HTML에 포함할 수 있습니다. 먼저 PDFObject 라이브러리의 supportsPDFs 메소드를 사용하여 브라우저가 HTML에 PDF 문서 삽입을 지원하는지 확인합니다. HTML에 PDF 포함을 지원한다는 것을 나타내는 true를 반환하면 embed("document_name.pdf","#elementid") 메서드를 사용하여 HTML에 PDF를 포함합니다. 이 기능은 HTML의 특정 요소에 PDF를 포함시킵니다. 전체 크기 PDF 삽입의 경우 요소 ID를 언급하지 않고 embed("document_name.pdf")라는 메소드를 호출합니다. 그러나 HTML에 PDF 포함을 지원하지 않는다는 것을 나타내는 false가 반환되면 필요에 따라 다른 대체 논리로 이동합니다. 자세한 내용은 아래 코드 조각을 확인하세요.

산출

다음 출력은 HTML에 포함된 PDF 문서를 표시합니다.

대체 메커니즘 생성

브라우저가 HTML에 PDF 포함을 지원하지 않을 때 활성화되는 PDFObject를 사용하여 웹 페이지에 PDF를 포함하는 동안 대체 메커니즘을 설정할 수 있습니다. PDFObject는 embed 함수를 호출하는 동안 대체 논리가 포함된 fallbackLink라는 매개변수를 활용합니다. 따라서 브라우저가 PDF 삽입을 지원하지 않는 경우 fallbackLink에 있는 코드는 지정된 div 요소에서 실행됩니다. 자세한 내용은 아래 코드 조각을 확인하세요.

산출

출력 스크린샷에는 대체 메커니즘에 의해 표시되는 콘텐츠가 표시됩니다. 브라우저가 HTML에 PDF 삽입을 지원하지 않을 때 대체 메커니즘이 활성화되었습니다.

Adobe의 PDF 열기 매개변수를 사용하여 PDF 포함

PDFObject 라이브러리를 사용하여 일부 열기 매개변수와 함께 PDF를 포함할 수 있습니다. PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { 매개변수 }}) 메서드를 사용하여 여는 매개변수와 함께 PDF 문서를 HTML에 포함합니다. . 이러한 PDF 열기 매개변수에는 PDF 열기, 특정 페이지 번호로 스크롤 등의 기능이 포함되어 있습니다. 자세한 내용은 아래 코드 조각을 확인하세요.

산출

다음 스크린샷은 포함 요소를 렌더링한 후 페이지 번호 3으로 스크롤하도록 하는 추가 매개 변수와 함께 HTML에 포함된 PDF 문서를 보여줍니다.

PDF.js를 통합하여 PDF 포함

우리가 알고 있듯이 PDFObject는 PDF를 HTML에 포함시키는 브라우저의 지원에 의존하지만 브라우저가 지원하지 않는 경우 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 손상과 같은 문제를 일으킬 수 있지만 라이브러리에는 지원 검색을 통해 이러한 문제를 해결할 수 있는 기능이 있습니다. 요소 및 폴백 메커니즘을 포함합니다. PDFObject와 PDF.js를 통합하여 포함 요소를 지원하지 않는 브라우저에서 PDF를 렌더링할 수도 있습니다. 한계에도 불구하고 PDFObject는 웹 페이지에 PDF 문서를 포함하고 렌더링하는 귀중한 도구로 돋보입니다.

유사한 제품