페이지에 PDF 뷰어를 삽입하는 방법은 무엇입니까?

내가 착각하지 않았다면 Google 문서 도구는를 통해 웹 페이지와 동일한 서버에 저장된 PDF를 표시하는 방법을 제공 <iframe>하지만 브라우저 간 호환 방식으로이를 수행 할 수있는 방법을 알아야합니다.

Philip Hutchison의 PDFObject 사용을 고려할 수 있습니다.

또는 자바 스크립트가 아닌 솔루션을 찾고 있다면 다음과 같은 마크 업을 사용할 수 있습니다.

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

PDF.js 는 네이티브 코드 지원없이 충실하고 효율적인 PDF (Portable Document Format) 렌더러를 구축하는 방법을 탐구하는 HTML5 기술 실험입니다. 커뮤니티 기반이며 Mozilla Labs에서 지원합니다.

여기 에서 데모를 볼 수 있습니다 .

이렇게하면 조금 더 잘 작동 할 수 있습니다.

<embed src= "MyHome.pdf" width= "500" height= "375">

내가 착각하지 않았다면 OP는 Google의 내장 PDF 디스플레이 서버가 자신의 웹 사이트에 PDF를 표시할지 여부를 묻습니다 (나중에 .js 솔루션을 수락했지만).

그래서, 1 년 반 후 : 그렇습니다.

http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html을 참조하세요 . 또한 https://docs.google.com/viewer를 참조 하십시오. 하고 표시하려는 파일의 URL을 연결 .

편집 : 다시 읽기, OP는 iFrame을 사용하지 않는 솔루션을 요청했습니다. Google 뷰어로는 불가능하다고 생각합니다.

Flex Paper http://flexpaper.devaldi.com/을 사용해보십시오.

그것은 낙서처럼 작동합니다

다양한 Reader 기본 설정에서 솔루션을 테스트해야합니다. 사이트 방문자는 브라우저와 달리 Reader / Acrobat에서 PDF를 열도록 브라우저를 설정할 수 있습니다 (예 : Firefox에서 Acrobat 플러그인 비활성화).

Adobe Acrobat과 Adobe Reader의 버전이 다르기 때문에 Firefox가 인식하는 두 개의 다른 Acrobat 플러그인이 있기 때문에 결과를 확신 할 수 없습니다. 그러나 적어도 웹 사이트 방문자가 어떤 일이 발생하는지 테스트해야하는 것 같습니다. 브라우저에서 PDF를 열지 않도록 브라우저를 설정했습니다. 다른 방법으로 사용 가능한 웹 페이지로 보이는 것을보고 브라우저가 요청하지 않은 PDF 파일을 열라고 잔소리를하면 상당히 짜증날 수 있습니다. 어떤 경우에는 PDF 파일이 브라우저가 아닌 Adobe Reader에서 자발적으로 열렸고, 다른 경우에는 브라우저가 파일이 존재하지 않는다는 대화 상자를 표시했습니다.

나는 iframe과 객체 모두와 같은 불일치, 다른 코드에 대한 다른 문제에 부딪 혔습니다.

이것은 간단한 HTML 코드를위한 것입니다. 제안 된 프레임 워크를 시도하지 않았습니다.

저는 FlowPaper, 특히 여기에서 찾을 수있는 새로운 Elements 모드를 선택할 것입니다 : https://flowpaper.com/demo/

텍스트를 선명하게 유지하는 동시에 PDF를 크게 평평하게하여 모바일 장치에서 훨씬 빠르게로드됩니다.

부트 스트랩을 사용하면 반응 형 및 모바일 우선 임베드 파일을 가질 수 있습니다.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

coolwanglu의 pdf2htmlEX는 아마도 pdf 파일을 html로 변환하는 최고의 솔루션 일 것입니다. 간단한 변환을 수행 한 다음 html 페이지를 iframe 또는 이와 유사한 것으로 임베드 할 수 있습니다.