วิธีที่แนะนำในการฝัง PDF ใน HTML?

วิธีที่แนะนำในการฝัง PDF ใน HTML คืออะไร?

• iFrame?
• วัตถุ?
• ฝัง?

Adobe บอกตัวเองเกี่ยวกับเรื่องนี้อย่างไร

ในกรณีของฉัน PDF ถูกสร้างขึ้นทันทีดังนั้นจึงไม่สามารถอัปโหลดไปยังโซลูชันของบุคคลที่สามก่อนที่จะล้างข้อมูล

อาจเป็นวิธีที่ดีที่สุดคือการใช้ห้องสมุดPDF.JS มันเป็นตัวเรนเดอร์HTML5 / JavaScriptบริสุทธิ์สำหรับเอกสาร PDF ที่ไม่มีปลั๊กอินของบุคคลที่สาม

การสาธิตออนไลน์: 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">

อัปเดต (1/2018):

เบราว์เซอร์ Chrome บน Android ไม่รองรับการฝัง PDF อีกต่อไป คุณสามารถแก้ไขปัญหานี้ได้โดยใช้โปรแกรมดู PDF ของ Google Drive

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

คุณสามารถใช้โปรแกรมดู PDF ของ Google เพื่อจุดประสงค์นี้ เท่าที่ฉันรู้ว่ามันไม่ใช่คุณลักษณะของ 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>

แปลงเป็น PNG ผ่าน ImageMagick และแสดง 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) ที่ผลงานเช่นนี้แต่มันก็มีมันเป็นความต้องการพิเศษของตัวเอง

ดูรหัสนี้เพื่อฝัง PDF ใน HTML

<!-- 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 Viewer ได้ง่ายขึ้น

แต่สำหรับเอกสาร PDF อย่างง่าย FDView ควรทำงานได้ดีพอสมควร

ปัญหาของเราคือว่าด้วยเหตุผลทางกฎหมายเราจะไม่ได้รับอนุญาตในการจัดเก็บชั่วคราวไฟล์ PDF บนฮาร์ดดิสก์ นอกจากนี้ไม่ควรโหลดหน้าทั้งหมดอีกครั้งเมื่อแสดง PDF เป็นตัวอย่างในเบราว์เซอร์

ก่อนอื่นเราลอง PDF.jS มันทำงานร่วมกับ Base64 ในโปรแกรมดูสำหรับ Firefox และ Chrome อย่างไรก็ตาม PDF ของเราช้าเกินไปจนไม่สามารถยอมรับได้ IE / Edge ไม่ทำงานเลย

เราจึงลองกับสตริง Base64 ในแท็กวัตถุ HTML สิ่งนี้ไม่ทำงานสำหรับ IE / Edge (อาจเป็นปัญหาเดียวกับ PDF.js) ใน Chrome / Firefox / Safari อีกครั้งไม่มีปัญหา นั่นเป็นเหตุผลที่เราเลือกโซลูชันไฮบริด IE / Edge เราใช้ IFrame และสำหรับเบราว์เซอร์อื่น ๆ ทั้งหมดนั้นคือ object-tag

แน่นอนว่าโซลูชัน IFrame จะใช้งานได้กับ Chrome และ บริษัท ร่วมด้วยเช่นกัน เหตุผลที่ว่าทำไมเราไม่ได้ใช้วิธีนี้สำหรับ Chrome คือแม้ว่ารูปแบบไฟล์ PDF จะปรากฏขึ้นอย่างถูกต้องChrome ทำให้คำขอใหม่ไปยังเซิร์ฟเวอร์เร็วที่สุดเท่าที่คุณคลิกที่ "ดาวน์โหลด" ในหน้าตัวอย่าง pdfHelperTransferData ที่ซ่อนอยู่ในฟิลด์ที่ต้องการ (สำหรับการส่งข้อมูลแบบฟอร์มของเราที่จำเป็นสำหรับการสร้าง PDF) ไม่ได้ถูกตั้งค่าอีกต่อไปเนื่องจาก PDF แสดงใน IFrame สำหรับคุณสมบัติ / ข้อผิดพลาดนี้ดูChrome จะส่งคำขอสองเมื่อดาวน์โหลดไฟล์ PDF (และยกเลิกการหนึ่งของพวกเขา)

ตอนนี้ปัญหาลูกหลาน IE9 และ IE10 ยังคงอยู่ สำหรับสิ่งเหล่านี้เราได้แก้ปัญหาตัวอย่างและเพียงแค่ส่งเอกสารโดยคลิกที่ปุ่มแสดงตัวอย่างเป็นการดาวน์โหลดไปยังผู้ใช้ (แทนที่จะเป็นตัวอย่าง) เราพยายามอย่างมาก แต่ถึงแม้ว่าเราจะได้พบวิธีแก้ปัญหาความพยายามพิเศษสำหรับส่วนเล็ก ๆ ของผู้ใช้จะไม่คุ้มค่ากับความพยายาม คุณสามารถหาวิธีการแก้ปัญหาของเราสำหรับการดาวน์โหลดที่นี่: ดาวน์โหลดไฟล์ PDF โดยไม่ต้องรีเฟรชกับ IFrame

Javascript ของเรา:

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 ดูที่นี่: ฉันจะตรวจสอบ Internet Explorer (IE) และ Microsoft Edge ได้โดยใช้ JavaScript ได้อย่างไร ฉันหวังว่าการค้นพบเหล่านี้จะช่วยคนอื่นได้ตลอดเวลา

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 ที่บันทึกไว้เช่นนี้:

example1

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

example2

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

Scribd ไม่ต้องการให้คุณโฮสต์เอกสารบนเซิร์ฟเวอร์อีกต่อไป หากคุณสร้างบัญชีกับพวกเขาเพื่อให้คุณได้รับรหัสผู้เผยแพร่ ใช้รหัส JavaScript สองสามบรรทัดเพื่อโหลดไฟล์ PDF ที่เก็บไว้ในเซิร์ฟเวอร์ของคุณเอง

สำหรับรายละเอียดเพิ่มเติมโปรดดูที่เครื่องมือสำหรับนักพัฒนา

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

PdfToImageServletโดยใช้convertคำสั่งของ ImageMagick

ตัวอย่างการใช้งาน: <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)
        })

เพิ่ม urlPDF แบบไดนามิกไปยัง HTML:

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

หนึ่งในตัวเลือกที่คุณควรพิจารณาคือNotable PDF
มันมีแผนฟรียกเว้นว่าคุณกำลังวางแผนที่จะทำงานร่วมกันแบบเรียลไทม์บน pdf

ฝังสิ่งต่อไปนี้iframeใน html ใด ๆ และเพลิดเพลินไปกับผลลัพธ์:

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

ในการสตรีมไฟล์ไปยังเบราว์เซอร์โปรดดูคำถามเกี่ยวกับสแต็คโอเวอร์โฟลว์วิธีสตรีมไฟล์ PDF เป็นไบนารี่ไปยังเบราว์เซอร์โดยใช้. NET 2.0 - โปรดทราบว่าหากมีการเปลี่ยนแปลงเล็กน้อย หรือสร้างขึ้นแบบไดนามิก

จากที่กล่าวมาบทความ MSDN ที่อ้างถึงนั้นมีมุมมองที่ค่อนข้างเรียบง่ายของโลกดังนั้นคุณอาจต้องการอ่านสตรีม PDF ไปยังเบราว์เซอร์ผ่าน HTTPS ได้อย่างประสบความสำเร็จรวมถึงส่วนหัวบางส่วนที่คุณต้องจัดหา

การใช้วิธีการนี้ iframe น่าจะเป็นวิธีที่ดีที่สุด มีเว็บฟอร์มหนึ่งรายการที่สตรีมไฟล์จากนั้นวาง iframe ไว้ในอีกหน้าพร้อมกับsrcตั้งค่าแอตทริบิวต์เป็นแบบฟอร์มแรก

1. สร้างหยดของอินพุต PDF ไบต์
2. ใช้iframeและPDF.js ที่ได้รับการแก้ไขด้วยวิธีแก้ไขปัญหาข้ามเบราว์เซอร์นี้

URI สำหรับ iframe ควรมีลักษณะดังนี้:

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

ตอนนี้ FF, Chrome, IE 11 และ Edge ทั้งหมดจะแสดง PDF ในวิวเวอร์ใน iframe ที่ส่งผ่าน URI หยดมาตรฐานใน URL

หากคุณไม่ต้องการโฮสต์ PDF.JS ด้วยตัวคุณเองคุณสามารถลองใช้DocDroidได้ มันคล้ายกับโปรแกรมดู PDF ของ Google ไดรฟ์ แต่อนุญาตให้ใช้แบรนด์กำหนดเองได้

ฉันต้องดูตัวอย่าง PDF ด้วย React ดังนั้นหลังจากลองใช้ไลบรารีหลาย ๆ ตัวโซลูชันที่ดีที่สุดของฉันคือดึงข้อมูลและเอามันออกมา

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

ฉันพบว่ามันใช้งานได้ดีและเบราว์เซอร์จัดการกับมันใน Firefox ฉันยังไม่ได้ตรวจสอบ IE ...

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