JavaScript PDF 뷰어를 만드는 방법-CSS 튜토리얼-php.cn

휴대용 문서 형식 또는 PDF는 특히 인쇄되거나 오프라인으로 인쇄 될 가능성이있는 경우 정확하게 형식의 텍스트 및 이미지가 포함 된 문서를 공유하는 데 이상적입니다. 대부분의 최신 브라우저는 PDF 파일을 표시 할 수 있지만 독립 탭 또는 창에서 실행되는 PDF 뷰어를 사용하여 사용자가 웹 사이트를 떠나도록 강요합니다.

PDF.JS는 오픈 소스 JavaScript 라이브러리입니다. 웹 페이지 내부에서 PDF 파일을 구문 분석하고 렌더링 할 수 있습니다. 이 튜토리얼에서는이를 사용하여 완전한 내용의 맞춤 JavaScript PDF 뷰어를 처음부터 작성하는 방법을 보여 드리겠습니다. 사용자 인터페이스 생성

새 웹 페이지를 만들고 일반적인 html5 보일러 플레이트 코드를 추가 하여이 JS PDF 뷰어 튜토리얼을 시작합니다. >, JS의 PDF 뷰어를위한 컨테이너 역할을 할 수있는 요소를 작성하십시오. PDF 뷰어는 html5

요소가됩니다. PDF 파일의 페이지를 그 안에 렌더링 할 것입니다. 따라서

요소 내부에 다음 코드를 추가합니다.

를 간단하게 유지하려면 주어진 시간에 캔버스 내부의 한 페이지 만 렌더링합니다. 그러나 사용자는 버튼을 눌러 이전 페이지 또는 다음 페이지로 전환 할 수 있습니다. 또한 현재 페이지 번호를 표시하고 사용자가 원하는 페이지로 점프 할 수 있도록 인터페이스는 입력 필드가 있습니다.

줌 작업을 지원하려면 인터페이스에 두 개의 버튼을 추가하십시오. : 하나는 확대하고 하나는 확대하고 축소 할 것입니다.

이 섹션의 끝에서 웹 페이지 코드는 다음과 같습니다. pdf.js

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

로그인 후 복사

javaScript pdf 뷰어의 베어 본 사용자 인터페이스가 준비되었으므로 웹 페이지에 pdf.js를 추가합시다. Library의 최신 버전은 CDNJS에서 사용할 수 있으므로 웹 페이지 끝에 다음 줄을 추가하여 할 수 있습니다.

<body> 라이브러리의 로컬 사본을 사용하는 것이 좋습니다. , PDFJS-Dist 저장소에서 다운로드 할 수 있습니다. PDF 파일로드 <div>

PDF 파일로드를 시작하기 전에 JS에 PDF 뷰어의 상태를 저장하기 위해 간단한 JavaScript 객체를 만들어 봅시다. 그 안에는 PDF 파일 자체에 대한 참조, 현재 페이지 인덱스 및 현재 줌 레벨에 대한 세 가지 항목이 있습니다. 이 시점에서는 PDF 파일을 호출하여로드 할 수 있습니다. 비동기 적으로 실행되는

<div id="my_pdf_viewer"><br>     <br></div><br>

로그인 후 복사

객체의

메소드

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

로그인 후 복사

메소드는 내부적으로 AN getDocument() 객체를 사용하여 PDF 파일을로드합니다. 즉, 파일이 자체 웹 서버 또는 크로스 오리핀 요청을 허용하는 서버에 있어야합니다. XMLHttpRequest PDF 파일이 편리하지 않으면 Wikipedia에서 사용중인 제품을 얻을 수 있습니다. .

PDF 파일이 성공적으로로드되면 상태 객체의

속성을 업데이트 할 수 있습니다.

마지막으로 기능에 호출을 추가하십시오. JS의 PDF 뷰어가 PDF 파일의 첫 페이지를 자동으로 렌더링하도록 지명 . 다음 단계에서 함수를 정의합니다. pdf

<div id="my_pdf_viewer"><br>     <br></div><br>

로그인 후 복사

페이지를

페이지 번호를 호출하고 페이지 번호를 전달함으로써 PDF 파일의 모든 페이지에 대한 참조를 얻을 수 있습니다. 지금은 국가 대상의 render() 속성을 전달해 봅시다. 이 메소드도 약속을 반환하므로 결과를 처리하려면 콜백 함수가 필요합니다. 따라서 다음 코드를 포함하는 라는 새 함수를 만듭니다. 실제로 페이지를 렌더링하려면 콜백 내부에서 사용 가능한 객체의

메소드를 호출해야합니다. 인수로서,이 방법은 우리의 캔버스와

<div id="canvas_container"><br>    <canvas id="pdf_renderer"></canvas><br></div><br>

로그인 후 복사

객체의 2D 컨텍스트를 기대하며,

메소드를 호출함으로써 얻을 수 있습니다. 메소드는 원하는 줌 레벨을 인수로 기대하기 때문에, 우리는 국가 객체의

속성을 전달해야합니다.

뷰포트의 치수는 원래 크기에 따라 다릅니다. 페이지와 줌 레벨. 전체 뷰포트가 캔버스에서 렌더링되도록하려면 이제 캔버스의 크기를 뷰포트의 크기에 맞게 변경해야합니다. 이 시점에서 페이지를 렌더링하고 페이지를 렌더링 할 수있는 방법은 다음과 같습니다. getPage() pdf 모든 소스 코드는 다음과 같이 보입니다. . currentPage 브라우저에서 웹 페이지를 열려면 이제 PDF 파일의 첫 페이지를 볼 수 있어야합니다.

PDF 뷰어는 현재 렌더링되는 페이지 크기와 줌 레벨에 따라 다릅니다. 사용자가 JavaScript의 PDF 뷰어와 상호 작용하는 동안 웹 페이지의 레이아웃이 영향을 받기를 원하지 않기 때문에 이상적이지 않습니다. 이 문제를 해결하려면 render() 우리가해야 할 일은 캔버스를 캡슐화하는 요소에 고정 너비와 높이를 제공하고

css 속성을 로 설정하기 만하면됩니다. 이 속성은 필요한 경우 스크롤 막대를

<div id="navigation_controls"><br>    <button id="go_previous">Previous</button><br>    <input id="current_page" value="1" type="number"/><br>    <button id="go_next">Next</button><br></div><br>

로그인 후 복사

요소에 추가하여 사용자가 수평 및 수직으로 스크롤 할 수 있도록합니다.

 웹 페이지의  태그 내부에 다음 코드를 추가하십시오.   <p> 물론, 너비와 높이를 자유롭게 변경하거나 미디어 쿼리를 사용하여  요소는 요구 사항과 일치합니다.  <code><head>

선택적으로, 다음 CSS 규칙을 포함시키기 위해

요소를 더 뚜렷하게 보이게 할 수 있습니다. 화면에서 이와 같은 것을 볼 수 있어야합니다. 현재 페이지 변경

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

로그인 후 복사

JavaScript PDF 뷰어는 현재 PDF 파일의 첫 페이지 만 표시 할 수 있습니다. 사용자가 렌더링되는 페이지를 변경할 수 있으려면 이제

버튼의 이벤트 리스너 내부에서 및 버튼에 클릭 이벤트 리스너를 추가해야합니다. 주 객체의 <div> 속성을 줄이면

아래로 떨어지지 않도록하십시오. 그렇게하면 새 페이지를 렌더링하기 위해 단순히

텍스트 필드의 값을 업데이트하여 새 페이지 번호를 표시하도록해야합니다. 다음 코드는 다음과 같은 방법을 보여줍니다. <div>

마찬가지로, 버튼의 이벤트 리스너 내부에서

<div id="my_pdf_viewer"><br>     <br></div><br>

로그인 후 복사

속성을 증가시켜 페이지 수를 초과하지 않도록해야합니다. PDF 파일에 존재합니다. 객체의

속성을 사용하여 결정할 수 있습니다.

마지막으로

텍스트 필드에 주요 프레스 이벤트 리스너를 추가해야합니다. 이 사용자는 단순히 페이지 번호를 입력하고

inter

키를 누르면 원하는 페이지로 직접 이동할 수 있습니다. 이벤트 리스너 내부에서는 사용자가 입력 한 숫자가

속성보다 0보다 크거나 적은지 확인해야합니다. pdf 파일의 모든 페이지를 표시합니다. go_previous 우리의 함수는 이미 페이지를 렌더링하는 동안 상태 객체의 go_next 속성을 이미 사용하기 때문에 줌 레벨을 조정하는 것은 속성을 증가 시키거나 줄이고 함수를 호출하는 것만 큼 쉽습니다.

버튼의 온 클릭 이벤트 리스너 내부에서 속성을 및 내부에서 증가시킵니다. 버튼의 이벤트 리스너를 클릭하면 go_previous 속성을 로 줄여 봅시다. 당신은

<!doctype html><br> <br><html lang="en"><br><head><br>  <meta charset="utf-8"><br>  <meta name="viewport" content="width=device-width, initial-scale=1"><br>  <title>My PDF Viewer</title><br></head><br><body><br>     <br></body><br></html><br>

로그인 후 복사

속성에 상한과 하한을 자유롭게 추가 할 수 있지만 필요하지 않습니다.

이것은 모두 함께 모일 때의 모습입니다. zoom

이제 PDF.JS를 사용하여 웹 사이트에 맞춤형 JavaScript PDF 뷰어를 만드는 방법을 알고 있습니다. JavaScript의 PDF 문서에 대한 새로운 시청자를 사용하면 조직의 브로셔, 백서, 양식 및 일반적으로 하드 카피로 배포되는 기타 문서를 표시하면서 완벽하게 사용자 경험을 제공 할 수 있습니다. 공식 Github Repo의 PDF.JS에 대한 자세한 내용

위 내용은 JavaScript PDF 뷰어를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!