จะฝังโปรแกรมดู PDF ในเพจได้อย่างไร?

ถ้าฉันไม่เข้าใจผิด Google Docs เสนอวิธีการแสดง PDF ที่เก็บไว้ในเซิร์ฟเวอร์เดียวกันกับหน้าเว็บผ่านทางแอ<iframe>ป แต่ฉันต้องการทราบว่าฉันจะทำสิ่งนี้ด้วยวิธีที่สอดคล้องกับข้ามเบราว์เซอร์ได้อย่างไร

คุณสามารถพิจารณาใช้PDFObjectโดย Philip Hutchison

หรือหากคุณกำลังมองหาโซลูชันที่ไม่ใช่ Javascript คุณสามารถใช้มาร์กอัปดังนี้:

<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เป็นการทดลองเทคโนโลยี HTML5 ที่สำรวจการสร้างตัวแสดงผลรูปแบบเอกสารพกพา (PDF) ที่ซื่อสัตย์และมีประสิทธิภาพโดยไม่ต้องใช้ความช่วยเหลือเกี่ยวกับโค้ดเนทีฟ เป็นชุมชนที่ขับเคลื่อนและสนับสนุนโดย Mozilla Labs

คุณสามารถดูการสาธิตที่นี่

วิธีนี้อาจได้ผลดีกว่านี้เล็กน้อย

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

ถ้าฉันไม่เข้าใจผิด OP ก็ถาม (แม้ว่าภายหลังจะยอมรับโซลูชัน. js) ว่าเซิร์ฟเวอร์การแสดงผล PDF แบบฝังของ Google จะแสดง PDF บนเว็บไซต์ของเขาเองหรือไม่

หนึ่งปีครึ่งต่อมาใช่จะเป็นเช่นนั้น

ดูhttp://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html โปรดดูที่https://docs.google.com/viewerและเสียบ URL ของไฟล์ที่คุณต้องการแสดง

แก้ไข: อ่านซ้ำ OP ขอวิธีแก้ปัญหาที่ไม่ใช้ iFrames ฉันไม่คิดว่าจะเป็นไปได้ด้วยโปรแกรมดูของ Google

ลองใช้Flex Paper http://flexpaper.devaldi.com/

มันทำงานเหมือน scribd

อย่าลืมทดสอบโซลูชันใด ๆ กับการตั้งค่า Reader ต่างๆ ผู้เยี่ยมชมไซต์อาจตั้งค่าเบราว์เซอร์ให้เปิด PDF ใน Reader / Acrobat ซึ่งตรงข้ามกับเบราว์เซอร์เช่นโดยการปิดใช้งานปลั๊กอิน Acrobat ใน Firefox ..

ฉันไม่แน่ใจในผลลัพธ์ของฉันเพราะฉันมีปลั๊กอิน Acrobat สองตัวที่แตกต่างกันซึ่ง Firefox รู้จักเนื่องจากฉันมี Adobe Acrobat และ Adobe Reader ที่แตกต่างกัน แต่ดูเหมือนว่าอย่างน้อยคุณต้องทดสอบว่าจะเกิดอะไรขึ้นหากผู้เยี่ยมชมเว็บไซต์ ได้ตั้งค่าเบราว์เซอร์ไม่ให้เปิด PDF ในเบราว์เซอร์ อาจเป็นเรื่องที่น่ารำคาญมากเมื่อพวกเขาดูสิ่งที่ดูเหมือนจะเป็นหน้าเว็บที่ใช้งานได้และเบราว์เซอร์ของพวกเขาจู้จี้ให้เปิดไฟล์ PDF ที่พวกเขาคิดว่าพวกเขาไม่ได้ร้องขอ ในบางกรณีไฟล์ PDF จะเปิดขึ้นเองโดยธรรมชาติใน Adobe Reader ไม่ใช่ในเบราว์เซอร์และในกรณีอื่น ๆ เบราว์เซอร์ก็แสดงกล่องโต้ตอบว่าไม่มีไฟล์

ฉันพบความไม่ตรงกันดังกล่าวกับ iframe และ object ทั้งสองอย่างปัญหาที่แตกต่างกันสำหรับโค้ดที่ต่างกัน

สำหรับโค้ด HTML แบบธรรมดา ฉันยังไม่ได้ลองใช้กรอบที่แนะนำ

ฉันจะเลือกใช้ FlowPaper โดยเฉพาะโหมด Elements ใหม่ที่สามารถพบได้ที่นี่: https://flowpaper.com/demo/

ไฟล์ PDF จะแบนลงอย่างมากในเวลาเดียวกันกับการรักษาความคมชัดของข้อความซึ่งหมายความว่าจะโหลดได้เร็วขึ้นมากบนอุปกรณ์พกพา

การใช้ bootstrap คุณสามารถมีไฟล์ฝังตัวแรกที่ตอบสนองและเคลื่อนที่ได้

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

pdf2htmlEX โดย coolwanglu น่าจะเป็นทางออกที่ดีที่สุดในการแปลงไฟล์ pdf เป็น html คุณสามารถทำการแปลงง่ายๆจากนั้นฝังเพจ html เป็น iframe หรือสิ่งที่คล้ายกัน