Bagaimana cara menampilkan file PDF dalam HTML?

155

Saya memiliki file PDF yang dibuat secara otomatis oleh itext dan saya perlu menampilkan file PDF dalam HTML. Pertanyaan saya adalah: Bagaimana cara menampilkan file PDF lokal dalam HTML menggunakan pdf.js ? Haruskah file PDF dihasilkan oleh beberapa standar?

html  pdf 
— vivek
sumber
1
Kemungkinan duplikat Tampilan PDF dalam peramban web
— Rizvan

Jawaban:

230

Implementasi file PDF di halaman web HTML Anda sangat mudah.

<embed src="file_name.pdf" width="800px" height="2100px" />

Pastikan untuk mengubah lebar dan tinggi untuk kebutuhan Anda. Semoga berhasil!

— Gofilord
sumber
Solusi hebat, sederhana.
— AugustoL
5
<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
— αsααc t ի ε βöss
The <embed>tag baru dalam HTML5, sangat nyaman. lihat di sini tautan
— Belter
2
Cara terbaik dijelaskan di jsgyan.blogspot.in/2017/12/...
— Suman Bogati
1
Ini menunjukkan bahwa plugin tidak didukung di perangkat seluler di browser chrome.
— JWC
50

Saya menggunakan penampil PDF Embeddedable Google Documents. Dokumen tidak harus diunggah ke Google Documents, tetapi harus tersedia secara online.

<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
— Rahul Sinha
sumber
1
Inilah tautannya: Embeddable Google Documents
— user1682406
Anda perlu menggunakan iframe bersama dengan google docs viewer jika tidak, Anda mungkin mendapatkan pesan "Kesalahan terdeteksi oleh Aplikasi Firewall", tergantung pada hosting Anda.
— user890332
1
Perhatikan bahwa metode ini hanya mendukung PDF hingga 25mb
— tommybond
2
Hanya komentar lebih lanjut, jika Anda ingin menanamkan file pdf di google drive. Setelah mengklik ke dalam pdf, cari "Sematkan item" itu akan menghasilkan iframe HTML.
— Daisy Qin
Itu tidak perlu online, Anda dapat menyimpannya di aset Anda secara lokal dan arahkan ke sana
— Manzur Khan
24

Jika Anda ingin menggunakan pdf.js, saya sarankan Anda untuk membaca INI

Anda juga dapat mengunggah pdf Anda di suatu tempat (seperti Google Drive) dan menggunakan URL-nya di iframe

atau 

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
— Komunitas
sumber
15

Anda dapat menampilkan dengan mudah di halaman html seperti ini 

<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500">
Luaskan cuplikan

— harun ugur
sumber
11

Di halaman html untuk pc mudah diimplementasikan

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%">

tetapi pdf show di ponsel dengan kode ini tidak mungkin Anda harus membutuhkan plugin

jika Anda belum responsif situs Anda. Kemudian kode di atas pdf tidak muncul di ponsel tetapi Anda dapat menempatkan opsi unduhan setelah kode

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
— pradip kor
sumber
Pada chrome itu ok tapi di IE tidak berfungsi. Bagaimana bisa dilakukan pada IE
— Hong Van Vit
7

Cara paling sederhana adalah menggunakan,

<iframe src="pdf-link">
</iframe>

dan jika masih diunduh alih-alih dilihat, periksa tajuk respons server, seharusnya sudah, Content-Disposition:Inlinedan tidak Content-Disposition:Attachment,.

— Rohith Murali
sumber
7

1. Penyisipan inline HTML asli browser:

<embed
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
    type="application/pdf"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></embed>
<iframe
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

Pro:

  • Tidak ada batasan ukuran file PDF (bahkan ratusan MB)
  • Ini solusi tercepat

Cons:

  • Itu tidak berfungsi di browser seluler

2. Penampil Google Documents:

<iframe
    src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

Pro:

  • Bekerja pada desktop dan browser seluler

Cons:

  • Batas file 25MB
  • Membutuhkan waktu tambahan untuk mengunduh pemirsa

3. Solusi lain untuk menanamkan PDF:

CATATAN PENTING:

Silakan periksa header respons HTTP X-Frame-Options. Itu harus SAMAORIGIN.

X-Frame-Options SAMEORIGIN;
— Ukr
sumber
6

Portable Document Format ( PDF ).

  • Peramban Apa pun «Gunakan _Embeddable Google Document Viewer untuk menanamkan file PDF di iframe.

    <iframe src="http://docs.google.com/gview?
    url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
    style="width:600px; height:500px;" frameborder="0">
</iframe>

  • Hanya untuk browser chrome «Chrome PDF viewer menggunakan plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html. 

    <embed type="application/pdf" 
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" 
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" 
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" 
title="CHROME">

Contoh Sippet:

<html>
   <head></head>
   <body style=" height: 100%;">
      <div style=" position: relative;">
      <div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
         <p>An 
            <a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
         </p>
         <!-- To make div with scroll data [max-height: 500;]-->
         <div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
            <img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
            <p>Streaming an Image form Response Stream (binary data) «  This buffers the output in smaller chunks of data rather than sending the entire image as a single block. 
               <a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
            </p>
         </div>
         <div style="float: left; width: 10%; background-color: red;"></div>
         <div style="float: left;width: 49%; ">
            <img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
            <p>Streaming an Image form Base64 String « embedding images directly into your HTML.
               <a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
               <sup>Data URI scheme</sup>
               </a>
               <a href="https://codebeautify.org/image-to-base64-converter">
               <sup>, Convert Your Image to Base64</sup>
               </a>
            <pre>data:[&lt;media type&gt;][;base64],&lt;data&gt;</pre>
            </p>
         </div>
      </div>
      <div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
      <video style="height: 500px;width: 100%;" name="media" controls="controls">
         <!-- autoplay -->
         <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
         <source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
      </video>
      <p>Video courtesy of 
         <a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
      </p>
      <div>
         <div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
            <p>Portable Document Format 
               <a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
            </p>
            <div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
               <embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
               <p>Chrome PDF viewer 
                  <a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
                  <sup>extension</sup>
                  </a>
                  <a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
                  <sup> (surfingkeys)</sup>
                  </a>
               </p>
            </div>
            <div style="float: left; width: 10%; background-color: red;"></div>
            <div style="float: left;width: 49%; ">
               <iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
               <p>Embeddable 
                  <a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file: 
<pre>
&lt;iframe 
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"&gt;&lt;/iframe&gt;
</pre>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>
Luaskan cuplikan

— Yash
sumber
5

Saya pernah mengalami hal serupa sebelumnya dan biasanya menggunakan tag

<a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"><strong>click here</strong></a>

tetapi menarik untuk mengetahui beberapa cara lain seperti di atas!

— DirWolf
sumber
2

Elemen ini didukung oleh semua browser dan mendefinisikan objek yang disematkan dalam dokumen HTML.

Intinya: OBJECT Baik, EMBED Tua. Selain tag PARAM IE, konten apa pun di antara tag OBJECT akan diberikan jika browser tidak mendukung plugin yang dirujuk OBJECT, dan tampaknya, konten tersebut meminta http, terlepas dari apakah itu di-render atau tidak. Referensi

Kode kerja: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6 

<!DOCTYPE html>
<html>
<body>

<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>
Luaskan cuplikan

— Sufiyan Ansari
sumber
0

Kamu bisa memakai

<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>

Atau, jika Anda ingin membuatnya mengambil seluruh halaman:

<a href="your_pdf_file_path>Link</a>
— aaron34weston
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.