PDF dosyası HTML'de nasıl görüntülenir?

155

İtext tarafından otomatik olarak oluşturulmuş bir PDF dosyam var ve bu PDF dosyasını HTML olarak göstermem gerekiyor. Benim sorum: pdf.js kullanarak yerel bir PDF dosyasını HTML olarak nasıl görüntüleyebilirim ? Bu PDF dosyası bazı standartlara göre oluşturulmalı mı?

html  pdf 
— vivek
kaynak
1
— Rizvan

Yanıtlar:

230

Bir HTML dosyasının HTML web sayfanıza uygulanması çok kolaydır.

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

İhtiyaçlarınız için genişlik ve yüksekliği değiştirdiğinizden emin olun. İyi şanslar!

— Gofilord
kaynak
Harika bir çözüm, basit.
— AugustoL
5
<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
— Ĭsααc t ի ε βöss
<embed>Etiketi çok uygun, HTML5 getirdiği bir yeniliktir. buraya bakın bağlantı
— Belter
2
— Suman Bogati
1
Eklentinin krom tarayıcıdaki mobil cihazda desteklenmediğini gösterir.
— JWC
50

Google Dokümanlar gömülebilir PDF görüntüleyicisini kullanıyorum. Dokümanların Google Dokümanlar'a yüklenmesi gerekmez, ancak çevrimiçi olarak kullanılabilir olmaları gerekir.

<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
kaynak
1
— user1682406
İframe'i google dokümanlar görüntüleyici ile birlikte kullanmanız gerekir, aksi takdirde barındırma işleminize bağlı olarak bir "Uygulama Güvenlik Duvarı tarafından algılanan hata" mesajı alabilirsiniz.
— user890332
1
Bu yöntemin yalnızca 25mb'ye kadar PDF'leri desteklediğini unutmayın
— tommybond
2
Google sürücüsüne bir pdf dosyası gömmek istiyorsanız, sadece bir yorum daha yapın. PDF'yi tıkladıktan sonra, iframe HTML'sini oluşturacak "Öğeyi yerleştir" i bulun.
— Daisy Qin
Çevrimiçi olması gerekmez, yerel olarak varlıklarınızda saklayabilir ve işaret edebilirsiniz
— Manzur Khan
24

Pdf.js dosyasını kullanmak istiyorsanız, BU makaleyi okumanızı öneririm.

Ayrıca pdf'nizi bir yere (Google Drive gibi) yükleyebilir ve URL'sini iframe içinde kullanabilirsiniz

veya 

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

böyle bir html sayfasında kolayca görüntüleyebilirsiniz 

<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500">
Snippet'i genişlet

— harun ugur
kaynak
11

Pc için html sayfasında uygulamak kolaydır

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

ancak bu kod ile mobil pdf gösterisi mümkün değildir bir eklentiye ihtiyacınız var

sitenizi yanıtlamadıysanız. Sonra yukarıdaki kod pdf mobil görünmüyor ama kod sonra indirme seçeneği koyabilirsiniz

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
— pradip kor
kaynak
Krom üzerinde Tamam ama IE üzerinde çalışmaz. IE'de nasıl yapılabilir
— Hong Van Vit
7

En basit yol kullanmaktır,

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

ve görüntüleme yerine hala indiriliyorsa , sunucu yanıt başlığını kontrol edin, olması gerekir Content-Disposition:Inlineve olmamalıdır Content-Disposition:Attachment.

— Rohith Murali
kaynak
7

1. Tarayıcı-yerel HTML satır içi gömme:

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

  • PDF dosya boyutu sınırlaması yok (yüzlerce MB bile)
  • En hızlı çözüm

Eksileri:

  • Mobil tarayıcılarda çalışmaz

2. Google Doküman Görüntüleyici:

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

  • Masaüstü ve mobil tarayıcıda çalışır

Eksileri:

  • 25 MB dosya sınırı
  • Görüntüleyiciyi indirmek için ek süre gerekir

3. PDF gömmek için diğer çözümler:

ÖNEMLİ NOT:

Lütfen X-Frame-Options HTTP yanıt başlığını kontrol edin. SAMEORIGIN olmalı.

X-Frame-Options SAMEORIGIN;
— Ukr
kaynak
6

Taşınabilir Belge Biçimi ( PDF ).

  • Herhangi bir Tarayıcı « PDF dosyasını gömmek için _Embeddable Google Doküman Görüntüleyici'yi kullanın 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>

  • Yalnızca krom tarayıcı için «Eklentiyi kullanan Chrome PDF görüntüleyici. 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">

Örnek 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>
Snippet'i genişlet

— Yash
kaynak
5

Daha önce benzer bir şey yaşadım ve normalde etiketler kullandım

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

ancak yukarıdaki gibi başka yollar bulmak ilginç!

— DirWolf
kaynak
2

Öğe tüm tarayıcılar tarafından desteklenir ve bir HTML belgesindeki gömülü bir nesneyi tanımlar.

Alt satır: NESNE İyi, EMBED Eski. IE'nin PARAM etiketlerinin yanı sıra, tarayıcı OBJECT'in belirtilen eklentisini desteklemiyorsa, OBJECT etiketleri arasındaki herhangi bir içerik oluşturulur ve görünüşe göre içerik, oluşturulup oluşturulmadığına bakılmaksızın http istenir. Referans

Çalışma kodu: 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>
Snippet'i genişlet

— Sufiyan Ansari
kaynak
0

Kullanabilirsiniz

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

Veya sayfanın tamamını kaplamasını istiyorsanız:

<a href="your_pdf_file_path>Link</a>
— aaron34weston
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.