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

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

• iFrame?
• 목적?
• 끼워 넣다?

Adobe는 이에 대해 무엇을 말합니까?

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

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

온라인 데모 : http://mozilla.github.com/pdf.js/web/viewer.html

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

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

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

업데이트 (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">

이 목적으로 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>

중요한 것은 플래시 플레이어가 필요하지 않으며 JavaScript를 사용한다는 것입니다.

쿼리 문자열에 일부 옵션을 전달하여 브라우저에서 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>

모두를 사용 <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>

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)도 있지만 고유 한 요구 사항이 있습니다.

이 코드를 살펴보십시오. 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>

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

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

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

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

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

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

IFrame 솔루션은 물론 Chrome 및 공동 작업에서도 작동합니다. 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를 감지하려면 어떻게합니까? 이러한 결과가 다른 사람을 구해줄 수 있기를 바랍니다.

1. PDF를 담을 컨테이너 만들기

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

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

   <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/

저장된 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>

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

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

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

ImageMagick의 convert명령을 사용하는 PdfToImageServlet

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

이것이 내가 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)
        })

HTML에 동적으로 urlPDF 추가 :

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

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

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

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

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

언급 한대로, 참조 된 MSDN 기사는 세계를 다소 단순하게 보여 주므로 HTTPS 를 통해 브라우저로 PDF를 성공적으로 스트리밍하고 공급해야하는 일부 헤더에 대해 PDF를 읽을 수 있습니다.

이 접근법을 사용하면 iframe이 가장 좋은 방법 일 것입니다. 파일을 스트리밍하는 웹 양식을 하나 만든 다음 src속성을 첫 번째 양식으로 설정 하여 iframe을 다른 페이지에 놓습니다 .

1. 입력 된 PDF 바이트의 블롭 구성
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를 표시합니다.

당신이 당신의 자신의 호스트 PDF.JS하지 않으려면, 당신은 시도 할 수 DocDroid을 . Google 드라이브 PDF 뷰어와 유사하지만 맞춤 브랜딩이 가능합니다.

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>

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

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