웹 브라우저에 PDF 표시

84

.html 페이지의 웹 브라우저에 pdf를 표시하려면 어떻게해야합니까?

html  pdf  browser 
— CodeGuy
소스

답변:

120

Google 문서에 포함 가능한 PDF 뷰어를 사용합니다. 문서를 Google 문서에 업로드 할 필요는 없지만 온라인에서 사용할 수 있어야합니다.

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
— Bradenkeith
소스
3
이 솔루션을 사용하면 일부 사용자는 PDF 파일을 볼 수 없지만 Google에서 먼저 로그인하도록 요청합니다.
— Philipp Zedler 2013 년
41
이 솔루션에 대한 질문이 있습니다. Google은 내 pdf 파일의 사본을 서버에 저장합니까? 내 콘텐츠의 개인 정보가 보존됩니까?
— HD.
@Alex는 확실히 알고 있습니다. 시도해 보겠습니다. 시도해 보겠습니다.-: //docs.google.com/gview? url = : //path.com/to/your/pdf.pdf&embedded=true as the iframe src
— bradenkeith
iFrame의 src를 pdf로 직접 설정하는 @Will의 솔루션과 어떻게 다르거 나 더 나은가요? 나는 직접 링크가 실제로 pdf를 표시하기 위해 소프트웨어 클라이언트 측에 의존한다고 생각하지만 Google 문서도 마찬가지입니까?
— Félix Gagnon-Grenier
3
@hd. 예, Google은 임베디드 디스플레이를 통해 PDF를 표시합니다. 나는 그들이 그것을 페이지 단위로 번역해야 할 것이지만 사본을 보관하지 않는다고 생각한다. 그래서 어느 시점에서 나는 그들이 페이지 단위로 PNG로 변환 할 것으로 기대한다. 이 답변을 사용하는 모든 사람은 Google 문서 이외의 문서에 대한 대역폭 제한이 있습니다. 소진되면 PDF가 표시되지 않고 대역폭이 초과되었다는 메시지 만 표시되고 나중에 다시 시도해야합니다.
— Jon
36

iframe을 사용하는 대신 타사에 따라 flexpaper 또는 pdf.js 사용에 대해 생각하십시오.

나는 PDF.js를 사용 했는데 잘 작동합니다. 다음은 데모 입니다.

— Navins
소스
3
타사가 아닌 이유는 무엇입니까?
— Alex
41
타사 서비스가 아닌 타사 코드입니다.
— Collin Anderson
VPN 환경을위한 더 나은 솔루션입니다.
— Erlan
19

object 태그를 사용하여

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

너비와 높이를 원하는 값으로 변경할 수 있습니다. http://www.w3schools.com/tags/tag_object.asp 를 방문하십시오 .

— 바카리 셰그 헴베
소스
게시 한 좋아요는 답변에 대한 더 이상 통찰력을 제공하지 않습니다.
— Daniël W. Crompton
2
질문은 .html 페이지의 웹 브라우저에서 pdf를 어떻게 표시 할 수 있습니까? html 5 object 태그를 사용하면 도움이됩니다 ... <object width = "400"height = "400"data = "helloworld.swf"> </ object>이 요소를 사용하여 멀티미디어 (예 : 오디오, 비디오, Java 애플릿, ActiveX, PDF 및 Flash)를 웹 페이지에 추가합니다.
— BAKARI SHEGHEMBE
당신은 완전히 옳지 만 w3schools에 대한 링크는 당신이 작성한 답을 보완하기 위해 더 많은 정보를 제공하지 않습니다.
— Daniël W. Crompton
당신이 당신의 브라우저에있는 PDF 뷰어가없는 경우이 작동하지 않을 것입니다
— UMAIR 하미드
1
응 그것은 사실이야. object 태그의 좋은 점은이를 감지 할 수 있다는 것입니다. 그리고 방문자가 gdrive, onedrive 등을 통해 페이지를 볼 수 있도록 추가 옵션을 설정할 수 있습니다. <object data = ' example.com/path.pdf#toolbar=1'type='application/pdf'width = ' 100 % 'height ='700px '> <p> 웹 브라우저가 PDF 파일을 표시하도록 구성되지 않은 것 같습니다. 걱정하지 마세요. <a href=' example.com/path.pdf'> 여기를 클릭 하여 PDF 파일을 다운로드하세요. </a> 또는 <a href = " drive.google.com/ [드라이브 경로] / view? usp = 공유 "> 보려면 여기를 클릭 </A> </ P> </ object>
— 바카리 SHEGHEMBE
19

가장 간단한 방법은 iframe 을 만드는 것입니다. 소스를 PDF의 URL로 설정하는 것입니다.

(미친 HTML 디자이너를 따돌림) 직접 해보고, 크로스 브라우저에서 잘 작동합니다 (벙커로 크롤링).

8
IE에 pdf 플러그인이 설치되어 있지 않으면 작동하지 않습니다
— Collin Anderson
3
그게 어떻게 명백합니까? "크로스 브라우저"에 대한 유용한 부록처럼 보입니다.
— showdev 2015 년
1
이것은 다른 모든 타사 제품보다 설정이 훨씬 쉬웠습니다. 2011 년에는 어떻게했는지 모르겠지만 2016 년에는 매우 빠르고 유용한 기능으로 가득 차 있습니다. 또한 크롬, FF와 IE에서 작업 좋은 것 같다
— 양배추
1
Android 휴대폰의 Chrome에서는 작동하지 않습니다. pdf를 다운로드하고 별도의 앱에서 엽니 다 (있는 경우). iOS의 Safari에서 다른 페이지로 스크롤 할 수 없습니다. pdf의 첫 페이지 만 봅니다.
— Vasiliy Zverev
7

브라우저의 플러그인은 이러한 설정을 제어하므로 강제로 설정할 수 없습니다. 그러나, 당신은 간단하게 할 수있는 <a href="whatver.pdf">대신을 <a href="whatever.pdf" target="_blank">.

— jschorr
소스
마지막으로이 답변에 대해 그들이 말하는 것을 아는 사람. 이것이 가장 좋은 대답이고 가장 간단합니다. @jschorr은 절대적으로 정확합니다. 브라우저는 이러한 설정을 제어합니다. 가장 효율적입니다 !!
— Val
4

PDF를 호스팅하는 한 대상 속성은 갈 길입니다. 즉, 상대 파일의 경우 _blank 값이있는 대상 속성을 사용하면 잘 작동합니다.

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

절대 경로의 경우 엔진은 U nified R 로 이동합니다. esource L ocator과 자신을 엽니 다. 따라서 대상 속성을 억제하십시오.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

브라우저는 두 경우 모두 신뢰할 수 있습니다.

— Ftcosta
소스
이 솔루션은 받아 들인 대답보다 나에게 더 잘 작동했습니다. 또한 일부 민감한 정보를 다루기 때문에 문서를 공개하지 않는 것이 중요했습니다.
— Casper Wilkes
3

이 코드를 사용할 수 있습니다.

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

또는 Google 문서에 포함 가능한 PDF 뷰어를 사용하세요.

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>
— Hieu Le
소스
1

이 간단한 GoogleDoc 접근 방식을 사용할 수도 있습니다.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

이렇게하면 흐름을 왜곡하지 않고 문서를 볼 수있는 새 페이지가 생성됩니다.

— Asuquo12
소스
이것은 잘 작동합니다. 감사합니다. 그러나 만약 사용자가 인터넷 연결없이 PDF를보고 싶다면 어떻게해야할까요?
— User
pdf.js github.com/mozilla/pdf.js .. 와 같은 JQuery 라이브러리를 사용할 수 있습니다 . 2. HTML 파일에 PDF를 포함하는 Javascript 라이브러리 인 PDFObject를 확인하십시오. 브라우저 호환성을 매우 잘 처리하며 IE8에서 작동 할 가능성이 높습니다.
— Asuquo12 2017 년
0

간단한 해결책은 iframe에 넣고 사용자가이를 지원하는 플러그인이 있기를 바라는 것입니다.

(그렇지 않습니다. Acrobat 플러그인은 리소스를 많이 사용하고 불안정한 원인이되어서 터치하는 모든 브라우저에서 제거해야합니다.)

복잡하지만 상대적으로 많이 사용되는 솔루션은 플래시 애플릿에 표시하는 것입니다.

— 쿠엔틴
소스
0

JPedal (Java 라이브러리)을 사용하여 서버에서 PDF 파일 페이지를 PNG 파일로 렌더링합니다 . 이는 일부 자바 스크립트와 결합하여 시각화 및 탐색에 대한 높은 제어를 제공합니다.

— Carles Barrobés
소스
나는 이것이 훌륭하다고 생각하지만 많은 자원이 필요합니다.
— eveevans
그러나 사용자는 PNG에서 텍스트를 복사 / 붙여 넣기 할 수 없습니다.
— Vasiliy Zverev
0

좁은 전화 화면에서는 좌우 스크롤이 많이 필요했기 때문에 최근에 .pdf 문서의 모바일 친화적이고 반응이 빠른 버전을 제공해야했습니다. 세로 스크롤 만 허용하고 가로 스크롤을 방지하기 위해 다음 단계가 효과적이었습니다.

  • Chrome 브라우저에서 .pdf를 엽니 다.
  • Google 문서로 열기를 클릭합니다.
  • 파일> 다운로드> 웹 페이지를 클릭합니다.
  • 다운로드 한 문서를 클릭하여 압축을 풉니 다.
  • 압축이 풀린 HTML 문서를 클릭하여 Chrome 브라우저에서 엽니 다.
  • fn F12를 눌러 Chrome 개발자 도구를 엽니 다.
  • copy (document.documentElement.outerHTML.replace (/ padding : 72pt 72pt 72pt 72pt; /, '') .replace (/ margin-right :. *? pt / g, ''))를 콘솔에 붙여넣고 Enter 키를 누릅니다. 조정 된 문서를 클립 보드에 복사하려면
  • 텍스트 편집기 (예 : 메모장)를 열거 나 필자의 경우 VSCode를 열고 붙여넣고 .html 확장자로 저장합니다.

결과는 좋아 보였고 데스크톱과 모바일 환경 모두에서 사용할 수있었습니다.

— 마커스
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.