pdfjs 사용법 튜토리얼

pdf.js 프레임워크의 매력은 로컬 지원 없이 HTML5용으로 구현되었으며 브라우저와도 더 잘 호환된다는 것입니다. 요구 사항은 단 하나입니다. 브라우저가 HTML5를 지원한다는 것입니다! (단, IE 하위 버전의 경우에는 안타까운 마음밖에 표현할 수 없습니다!)

IE9 이상은 괜찮다고 합니다. 제 로컬은 IE11이라 IE11에서만 테스트해서 통과했습니다( 물론 Firefox, 360도 테스트했는데 괜찮습니다.)

프로젝트 개발 요구 때문에 PDF는 온라인으로 표시되고 IE와 호환되어야 하므로 pdf.js를 선택했지만 온라인에 대한 튜토리얼이 거의 없습니다. 돌아보니 생각보다 어렵지 않아서 다들 참고하실 수 있게 블로그를 쓰기로 했어요!

pdf.js 관련 URL은 다음과 같습니다.

GitHub: https://Github.com/mozilla/pdf .js /

위 URL에는 pdf.js에 대한 기본적인 소개와 소스코드를 얻는 방법, 추후 빌드하는 방법이 나와있습니다!

그러나 그는

$ Git clone Git://Github.com/mozilla /pdf를 사용합니다. js.Git

다음을 사용하여 빌드:

$ node make generic

Windows 7에서 Git, node(아는거 있으면 알려주시면 감사하겠습니다!) 그래서 Linux로 전환해서 빌드를 했습니다(이 기간 동안 슬픈 경험이 많았는데, 영화로 만들어도 좋을 것 같은 느낌이 듭니다) !!! 예를 들어, 소스 코드를 얻기 위해 Git을 사용했을 때 시스템에서 Git이 설치되지 않았다는 메시지를 표시했습니다. ShellJS를 설치하려면 npm을 사용하라고 했는데 예상대로 npm을 설치하지 않았습니다...) 실제로 우리는 pdf.js를 사용하며 궁극적으로 빌드된 콘텐츠만 필요합니다. 여기에서 다운로드하세요:

------------ ---------------- -----구분선------ ----------

무료 다운로드 주소는 http://linux.linuxidc.com/입니다.

사용자 이름과 비밀번호는 www.linuxidc.com입니다.

구체적인 다운로드 디렉토리는 /2015 information/입니다. June/12/pdf.js

사용 튜토리얼/

다운로드 방법은 http://www.linuxidc.com/Linux/2013-07/87684.htm을 참조하세요

--------- ---------구분선---- --------- ---------------

빌드 후 디렉터리 구조는 다음과 같습니다. :

빌드 후의 빌드 콘텐츠로 간단한 테스트를 수행하고 일반을 Tomcat의 웹앱에 복사할 수 있습니다

Tomcat을 시작한 후 다음을 전달할 수 있습니다:

http://localhost:8080/generic/web/viewer.html

방문해보세요! 매우 멋진 인터페이스를 볼 수 있습니다:

generic/web/viewer.html은 주로 PDF 리더의 스타일을 렌더링하는 반면, generic/web/viewer.js는 열린 PDF 파일( 물론 다른 기능도 있지만 이는 우리의 관심사가 아닙니다. generic/web/viewer.js에 있는 코드 조각을 살펴보겠습니다.

기본적으로 열려있는 것을 확인할 수 있습니다 generic/web/compressed.tracemonkey-pldi-09.pdf 파일에서 다음 코드를 살펴보세요.

이것은 파일 매개변수 문서를 전달하여 열린 PDF를 동적으로 지정할 수 있음을 알려줍니다! 예:

http://localhost:8080/generic/web/viewer.html?file=qbs.pdf

아래에서는 특정 임베디드 프로젝트에서 사용하는 방법을 소개하겠습니다!

일반 콘텐츠를 타사 플러그인으로 사용하고 다음과 같이 프로젝트에 저장할 수 있습니다.

그런 다음 페이지에서 ?file=" width="100%" height="800">

다음과 같이 렌더링:

핵심은 우리가 직접적으로 generic/web/viewer .html에 액세스한 다음 파일 매개변수를 지정하여 열려는 pdf 파일을 지정하세요! 위에서 사용한 스트림 방법이 지정됩니다.

위는 단지 간단한 사용 방법입니다. 여기에 더 복잡한 사용 방법이 있습니다.

다음 URL 요청을 시도해 보셨는지 모르겠습니다.

http://localhost:8080/akane/resources/plugin/pdfJs/generic/web/viewer.html?file=/akane/displayPDF.do?id=966c6f0e-3c06-4154-aafd-afdbee5bcb65

실제 애플리케이션에서는 다양한 매개변수를 기반으로 다양한 PDF 파일을 표시하도록 선택할 수 있습니다. 이때 위의 URL 주소를 주의 깊게 관찰하면 파일 요청 매개변수에서 이를 확인할 수 있습니다. 값은 URL 주소이고 이 URL 주소에는 자체 요청 매개변수가 추가되어 URL 주소에 "?"

2개가 나타나 브라우저가 이 URL을 정상적으로 구문 분석할 수 없게 됩니다!

한 가지 해결책은 파일 매개변수의 값을 먼저 인코딩한 다음 이를 디코딩하여 이 문제를 해결하는 것입니다!

이때 encodeURIComponent() 함수가 나타나도록 요청할 수 있습니다! js 함수이므로 아래와 같이 문서 준비 함수에서 iframe에 대한 src 값을 동적으로 설정해야 합니다.

< ;스크립트 유형 ="text/javascript">
$(function(){
$("#displayPdfIframe").attr("src",'?file=' + encodeURIComponent(''));
} );

                          "100%" height="100%">
< ;/div>

인코딩이 있으니 디코딩도 있어야 하는데 아래와 같이 generic/web/viewer.js 작업이 이미 완료되었습니다. :

이 시점에서 pdf.js 플러그인 소개가 끝났습니다.

블로그 작성이 있다면. 혹시 잘못된 점이 있으면 조언 좀 부탁드립니다. 감사합니다!

pdf.js의 두 작성자에게 감사의 말씀을 전하고 싶습니다. 외국의 거장들이 정말 존경스럽습니다. 이렇게 좋은 프레임워크를 작성하는 분이 두 분이십니다. 그리고 그것은 또한 오픈 소스입니다!).

이 기사의 영구 업데이트 링크 주소: http://www.linuxidc.com/Linux/2015-06/118728.htm

이상으로 다양한 측면을 포함하여 pdfjs 사용법 튜토리얼을 소개했습니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되길 바랍니다.