HTML에 PDF를 포함하는 권장 방법은 무엇입니까?

질문자 :Daniel Silveira

HTML에 PDF를 포함하는 권장 방법은 무엇입니까?

• 아이프레임?
• 물체?
• 포함시키다?

Adobe는 이에 대해 어떻게 말합니까?

제 경우에는 PDF가 즉석에서 생성되므로 플러시하기 전에 타사 솔루션에 업로드할 수 없습니다.

이것은 요점까지 빠르고 쉽고 타사 스크립트가 필요하지 않습니다.

 <embed src="http://example.com/the.pdf" width="500" height="375" type="application/pdf">

업데이트(2021년 2월 3일)

Adobe는 이제 자체 PDF Embed API를 제공합니다.

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

업데이트(2018년 1월):

Android의 Chrome 브라우저는 더 이상 PDF 포함을 지원하지 않습니다. Google 드라이브 PDF 뷰어를 사용하여 이 문제를 해결할 수 있습니다.

 <embed src="https://drive.google.com/viewerng/ viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

Batfan

아마도 가장 좋은 방법은 PDF.JS 라이브러리를 사용하는 것입니다. 타사 플러그인이 없는 PDF 문서용 순수 HTML5 / JavaScript 렌더러입니다.

온라인 데모: https://mozilla.github.io/pdf.js/web/viewer.html

깃허브: https://github.com/mozilla/pdf.js

lubos hasko

이를 위해 Google PDF 뷰어를 사용할 수도 있습니다. 내가 아는 한 이것은 공식 Google 기능이 아니지만(내가 잘못 알고 있습니까?), 그것은 저에게 매우 훌륭하고 원활하게 작동합니다. 이전에 어딘가에 PDF를 업로드하고 해당 URL을 사용해야 합니다.

 <iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

중요한 것은 Flash Player가 필요하지 않고 JavaScript를 사용한다는 것입니다.

Lukasz Korzybski

쿼리 문자열에 몇 가지 옵션을 전달하여 브라우저에 PDF가 표시되는 방식을 어느 정도 제어할 수 있습니다. IE8에서 작동하지 않는다는 것을 깨달을 때까지 나는 이 작업에 만족했습니다. :(

Chrome 9 및 Firefox 3.6에서 작동하지만 IE8에서는 "PDF를 표시할 수 없는 경우 여기에 오류 메시지를 삽입하십시오."라는 메시지가 표시됩니다.

위의 브라우저 중 이전 버전을 아직 테스트하지 않았습니다. 그러나 누군가에게 도움이 될 경우를 대비하여 내가 가지고 있는 코드가 있습니다. 확대/축소가 85%로 설정되고 스크롤바, 도구 모음 및 탐색 창이 제거됩니다. IE에서도 작동하는 것을 발견하면 내 게시물을 업데이트하겠습니다.

 <object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0"> <p>Insert your error message here, if the PDF cannot be displayed.</p> </object>

Gayle

<object> 와 <embed> 모두 사용하면 브라우저 호환성이 더 넓어집니다.

 <object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px"> <embed src="http://yoursite.com/the.pdf" type="application/pdf"> <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p> </embed> </object>

Suneel Kumar

ImageMagick을 통해 PNG로 변환하고 PNG(빠르고 더티)를 표시합니다.

 <?php $dir = '/absolute/path/to/my/directory/'; $name = 'myPDF.pdf'; exec("/bin/convert $dir$name $dir$name.png"); print '<img src="$dir$name.png" />'; ?>

빠른 솔루션이 필요하고, 브라우저 간 PDF 보기 문제를 피하고, PDF가 한두 페이지에 불과한 경우에 좋은 옵션입니다. 물론 웹 서버에 ImageMagick이 설치되어 있어야 하며(Ghostscript가 필요함) 공유 호스팅 환경에서는 사용할 수 없는 옵션입니다. 이와 같이 작동하는 PHP 플러그인(imagick이라고 함)도 있지만 고유한 요구 사항이 있습니다.

Dan Mantyla

이 코드를 찾으십시오 - HTML에 PDF를 포함하려면

 <!-- Embed PDF File --> <object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720"> <a href="YourFile.pdf">shree</a> </object>

Community Wiki

다음과 같이 저장된 pdf의 상대 위치를 사용할 수 있습니다.

예1

 <embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

예2

 <iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

Ahmedakhtar11

FDView 는 PDF2SWF (자체가 xpdf를 기반으로 함)와 SWF 뷰어를 결합하므로 서버에서 즉석에서 PDF 문서를 변환하고 포함할 수 있습니다.

xpdf는 완벽한 PDF 변환기가 아닙니다. 더 나은 결과가 필요한 경우 Ghostview 에는 PDF 문서를 Flash 뷰어를 보다 쉽게 구축할 수 있는 다른 형식으로 변환하는 기능이 있습니다.

그러나 간단한 PDF 문서의 경우 FDView가 합리적으로 잘 작동해야 합니다.

Adam Davis

1. PDF를 보관할 컨테이너 만들기

    <div id="example1"></div>

2. 포함할 PDF와 포함할 위치를 PDFObject에 알려줍니다.

    <script src="/js/pdfobject.js"></script> <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. 선택적으로 CSS를 사용하여 치수, 테두리, 여백 등을 포함한 시각적 스타일을 지정할 수 있습니다.

    <style> .pdfobject-container { height: 500px;} .pdfobject { border: 1px solid #666; } </style>

출처 : https://pdfobject.com/

Said Bouigherdaine

문제는 법적 이유로 하드 디스크에 PDF를 임시로 저장할 수 없다는 것 입니다. 또한 브라우저에서 PDF를 미리보기로 표시할 때 전체 페이지를 다시 로드해서는 안 됩니다.

먼저 PDF.js를 시도했습니다. Firefox 및 Chrome용 뷰어에서 Base64와 함께 작동했습니다. 그러나 PDF에서는 허용할 수 없을 정도로 느렸습니다. IE/Edge가 전혀 작동하지 않았습니다.

따라서 HTML 개체 태그에 Base64 문자열을 사용하여 시도했습니다. 이것은 다시 IE/Edge에서 작동하지 않았습니다(PDF.js와 동일한 문제일 수 있음). Chrome/Firefox/Safari에서는 다시 문제가 없습니다. 이것이 우리가 하이브리드 솔루션을 선택한 이유입니다. IE/Edge에서는 IFrame을 사용하고 다른 모든 브라우저에는 object-tag를 사용합니다.

IFrame 솔루션은 물론 Chrome 및 co.kr에서도 작동합니다. Chrome에 이 솔루션을 사용하지 않은 이유는 PDF가 올바르게 표시되더라도 미리보기에서 "다운로드"를 클릭하는 즉시 Chrome이 서버에 새로운 요청을 하기 때문 입니다. PDF가 IFrame에 표시되기 때문에 필수 숨겨진 필드 pdfHelperTransferData (PDF 생성에 필요한 양식 데이터를 보내기 위한)는 더 이상 설정되지 않습니다. 이 기능/버그에 대해서는 Chrome이 PDF를 다운로드할 때 두 가지 요청을 보내고 그 중 하나는 취소를 참조하세요.

이제 문제 하위 IE9 및 IE10이 남아 있습니다. 이를 위해 우리는 미리보기 솔루션을 포기하고 미리보기 버튼을 클릭하여 사용자에게 (미리보기 대신) 다운로드로 문서를 보내기만 하면 됩니다. 우리는 많은 시도를 했지만 솔루션을 찾았다고 해도 이 작은 부분의 사용자를 위한 추가 노력은 그만한 가치가 없었을 것입니다. 여기에서 다운로드에 대한 솔루션을 찾을 수 있습니다. IFrame으로 새로 고침 없이 PDF 다운로드 .

우리의 자바스크립트:

 var transferData = getFormAsJson() if (isMicrosoftBrowser()) { // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe) var form = document.getElementById('pdf-helper-form'); $("#pdfHelperTransferData").val(transferData); form.target = "iframe-pdf-shower"; form.action = "serverSideFunctonWhichWritesPdfinResponse"; form.submit(); } else { // Case non IE use Object tag instead of iframe $.ajax({ url: "serverSideFunctonWhichRetrivesPdfAsBase64", type: "post", data: { downloadHelperTransferData: transferData }, success: function (result) { $("#object-pdf-shower").attr("data", result); } }) }

우리 HTML:

 <div id="pdf-helper-hidden-container" style="display:none"> <form id="pdf-helper-form" method="post"> <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" /> </form> </div> <div id="pdf-wrapper" class="modal-content"> <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe> <object id="object-pdf-shower" type="application/pdf"></object> </div>

IE/Edge의 브라우저 유형을 확인하려면 JavaScript를 사용하여 Internet Explorer(IE) 및 Microsoft Edge를 어떻게 감지합니까?를 참조하십시오. 이 발견이 다른 사람의 시간을 절약할 수 있기를 바랍니다.

Userino

Scribd는 더 이상 서버에서 문서를 호스팅할 필요가 없습니다. 그들과 함께 계정을 만들면 게시자 ID를 얻을 수 있습니다. 자체 서버에 저장된 PDF 파일을 로드하는 데 몇 줄의 JavaScript 코드만 있으면 됩니다.

자세한 내용은 개발자 도구 를 참조하십시오.

Bjorn

ImageMagick의 convert 명령을 사용하는 PdfToImageServlet.

사용 예: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

PLA

이것이 제가 AXIOS 와 Vue.js로 했던 방식입니다:

 axios({ url: `urltoPDFfile.pdf`, method: 'GET', headers: headers, responseType: 'blob' }) .then((response) => { this.urlPdf = URL.createObjectURL(response.data) }) .catch((error) => { console.log('ERROR ', error) })

urlPDF를 HTML에 동적으로 추가:

 <object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

Despertaweb

<object width="400" height="400" data="helloworld.pdf"></object>

Daryl H

고려해야 할 옵션 중 하나는 주목할만한 PDF입니다.
PDF에서 실시간 온라인 협업을 계획하지 않는 한 무료 요금제가 있습니다.

다음 iframe 을 HTML에 포함하고 결과를 즐기십시오.

 <iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

George Pligoropoulos

React로 PDF를 미리 봐야 했기 때문에 여러 라이브러리를 시도한 후 최적의 솔루션은 데이터를 가져와 ebmed하는 것이었습니다.

 const pdfBase64 = //fetched from url or generated with jspdf or other library <embed src={pdfBase64} width="500" height="375" type="application/pdf" ></embed>

Pecata

파일을 브라우저로 스트리밍하려면 스택 오버플로 질문 .NET 2.0을 사용하여 PDF 파일을 이진 파일로 브라우저에 스트리밍하는 방법을 참조하세요. 약간의 변형은 있지만 파일 시스템에서 파일을 제공하는지 여부에 관계없이 작동해야 합니다. 또는 동적으로 생성됩니다.

즉, 참조된 MSDN 기사는 세계에 대해 다소 단순한 관점을 취하므로 제공해야 할 수 있는 일부 헤더에 대해 HTTPS를 통해 브라우저로 PDF를 성공적으로 스트리밍하기를 읽을 수 있습니다.

이 접근 방식을 사용하면 iframe이 아마도 가장 좋은 방법일 것입니다. 파일을 스트리밍하는 하나의 웹 양식이 있고 src 속성이 첫 번째 양식으로 설정된 다른 페이지에 iframe을 넣습니다.

GalacticCowboy

1. 입력 PDF 바이트의 blob 구성
2. 이 교차 브라우저 해결 방법으로 패치된 iframe 및 PDF.js 사용

iframe의 URI는 다음과 같아야 합니다.

 /viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

이제 FF, Chrome, IE 11 및 Edge는 모두 URL의 표준 blob URI를 통해 전달된 iframe의 뷰어에 PDF를 표시합니다.

fartwhif

제 경우에 pdf를 포함하는 가장 좋은 방법은 pdf를 표시할 뿐만 아니라 사용 가능한 공간을 채우고 원하는 대로 비율을 지정할 수 있기 때문에 부트스트랩을 사용하는 것입니다. 다음은 내가 만든 것의 예입니다.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="http://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Marc Partensky

<embed src="data:application/pdf;base64,..."/>

raoof

PDF.JS를 직접 호스팅하고 싶지 않다면 DocDroid를 사용해 보세요 . Google 드라이브 PDF 뷰어와 유사하지만 사용자 지정 브랜딩을 허용합니다.

monday

PDF용으로 iFrame을 사용하세요.

나는 React.js 앱에 특정 요구 사항이 있었고 수백만 가지 솔루션을 시도했지만 iFrame으로 끝났습니다 :) 행운을 빕니다!

Maksym Koshyk

URI 제한으로 인해 PDF로 인코딩된 base64를 포함하는 데 문제가 발생하기 전에 2MB를 초과하는 파일은 Chrome에서 제대로 렌더링되지 않습니다.

내 솔루션은 다음과 같습니다.

1. Blob으로 인코딩된 uri를 변환합니다 .

2. Blob에서 임시 DOM 문자열 기반을 생성합니다.

   const blob = dataURItoBlob(this.dataUrl);

   var temp_url = window.URL.createObjectURL(blob);

3. iframe을 DOM에 연결할 위치를 결정합니다.

   const target = document.querySelector(targetID);

   target.innerHTML = `<iframe src='${temp_url}' type="application/pdf"></iframe>

Tony Bui

PDF를 직접 호스팅하고 싶지 않거나 사용자가 PDF 파일을 다운로드하지 못하도록 하는 것과 같은 추가 보안 기능으로 PDF 뷰어를 사용자 정의하려는 경우. CloudPDF를 사용하는 것이 좋습니다. https://cloudpdf.io

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CloudPDF Viewer</title> <style> body, html { height: 100%; margin: 0px; } </style> </head> <body style="height: 100%"> <div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div> <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script> <script> document.addEventListener('DOMContentLoaded', function(){ const config = { documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60', darkMode: true, }; CloudPDF(config, document.getElementById('viewer')).then((instance) => { }); }); </script> </body> </html>

Bob Singor

나는 이것이 잘 작동하고 브라우저가 파이어 폭스에서 그것을 처리한다는 것을 알았습니다. IE를 확인하지 않았습니다 ...

 <script>window.location='url'</script>

Wynn

출처 : http:www.stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html