HTML में पीडीएफ फाइल कैसे प्रदर्शित करें?

155

मेरे पास itext द्वारा एक ऑटो जेनरेट की गई पीडीएफ फाइल है और मुझे उस पीडीएफ फाइल को HTML में प्रदर्शित करना होगा। मेरा प्रश्न है: HTML में एक स्थानीय पीडीएफ फाइल का उपयोग कर प्रदर्शित करने के लिए कैसे pdf.js ? क्या उस पीडीएफ फाइल को कुछ मानकों द्वारा उत्पन्न किया जाना चाहिए?

html pdf

— विवेक
स्रोत

1

वेब ब्राउजर के भीतर डिस्प्ले पीडीएफ के

— रिजवान

230

अपने HTML वेब पेज में एक पीडीएफ फाइल का कार्यान्वयन बहुत आसान है।

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

अपनी आवश्यकताओं के लिए चौड़ाई और ऊंचाई को बदलना सुनिश्चित करें। सौभाग्य!

— Gofilord
स्रोत

महान समाधान, सरल।

— अगस्तोएल

5

<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>

— βsααc t ի Ĭ 18öss

<embed>टैग बहुत सुविधाजनक एचटीएमएल 5 में नया है,। यहाँ देखें लिंक

— बेल्टर

2

सबसे अच्छा तरीका jsgyan.blogspot.in/2017/12/…

— सुमन बोगती

1

यह दिखाता है कि क्रोम ब्राउजर पर मोबाइल डिवाइस में प्लगइन समर्थित नहीं है।

— JWC मई

50

मैं Google डॉक्स एम्बेड करने योग्य पीडीएफ दर्शक का उपयोग करता हूं। डॉक्स को Google डॉक्स पर अपलोड करने की आवश्यकता नहीं है, लेकिन उन्हें ऑनलाइन उपलब्ध होना चाहिए।

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

— राहुल सिन्हा
स्रोत

1

यहाँ लिंक है:

— एंबेडेबल

आपको Google डॉक्स दर्शक के साथ मिलकर iframe का उपयोग करने की आवश्यकता है अन्यथा आपको अपनी होस्टिंग के आधार पर "एप्लिकेशन फ़ायरवॉल द्वारा प्राप्त त्रुटि" संदेश मिल सकता है।

— user890332

1

ध्यान दें कि यह विधि केवल 25mb तक पीडीएफ का समर्थन करती है

— tommybond

2

बस एक और टिप्पणी, अगर आप गूगल ड्राइव में एक पीडीएफ फाइल को एम्बेड करना चाहते हैं। पीडीएफ में क्लिक करने के बाद, "एंबेड आइटम" ढूंढें यह iframe HTML उत्पन्न करेगा।

— डेज़ी किन

यह जरूरी नहीं है कि ऑनलाइन होने के लिए, आप इसे अपनी संपत्ति में स्थानीय रूप से संग्रहीत कर सकते हैं और इसे इंगित कर सकते हैं

— मंज़ूर खान

24

आप उपयोग pdf.js चाहते हैं, मैं सुझाव है कि आप पढ़ने के लिए इस

आप अपने pdf को कहीं पर भी अपलोड कर सकते हैं (जैसे Google ड्राइव) और इसका URL iframe में उपयोग करें

या

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

— समुदाय
स्रोत

15

आप इस तरह से html पृष्ठ में आसानी से प्रदर्शित कर सकते हैं

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

स्निपेट का विस्तार करें

— हारुन बदसूरत
स्रोत

11

पीसी के लिए html पेज को लागू करना आसान है

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

लेकिन इस कोड से मोबाइल में पीडीएफ शो संभव नहीं है, आपको एक प्लगइन की आवश्यकता होगी

यदि आपने अपनी साइट को उत्तरदायी नहीं बनाया है। फिर ऊपर कोड पीडीएफ मोबाइल में नहीं दिखा लेकिन आप कोड के बाद डाउनलोड विकल्प डाल सकते हैं

<embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>

— प्रदीप कोर
स्रोत

क्रोम पर यह ठीक है, लेकिन IE पर काम नहीं कर रहा है। आईई पर कैसे कर सकते हैं

— हांग वान विट

7

उपयोग करने का सबसे सरल तरीका है,

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

और अगर इसकी अभी भी देखने के बजाय डाउनलोड हो रही है , तो सर्वर प्रतिक्रिया हेडर की जांच करें, यह होना चाहिए, Content-Disposition:Inlineऔर नहीं Content-Disposition:Attachment।

— रोहित मुरली
स्रोत

7

1. ब्राउज़र-देशी एचटीएमएल इनलाइन एम्बेडिंग:

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

समर्थक:

कोई PDF फ़ाइल आकार सीमाएँ (यहां तक कि सैकड़ों MB)
यह सबसे तेज उपाय है

विपक्ष:

यह मोबाइल ब्राउज़र पर काम नहीं करता है

2. Google डॉक्स दर्शक:

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

समर्थक:

डेस्कटॉप और मोबाइल ब्राउज़र पर काम करता है

विपक्ष:

25MB फ़ाइल सीमा
दर्शक को डाउनलोड करने के लिए अतिरिक्त समय चाहिए

3. पीडीएफ एम्बेड करने के लिए अन्य समाधान:

महत्वपूर्ण लेख:

कृपया X- फ्रेम-ऑप्शंस HTTP रिस्पांस हेडर की जांच करें। यह SAMEORIGIN होना चाहिए।

X-Frame-Options SAMEORIGIN;

— Ukr
स्रोत

6

पोर्टेबल दस्तावेज़ प्रारूप ( पीडीएफ )।

किसी भी ब्राउज़र « पीडीएफ फाइल को एम्बेड करने के लिए _Embeddable Google दस्तावेज़ दर्शक का उपयोग करें 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>
```

केवल क्रोम ब्राउज़र के लिए «क्रोम पीडीएफ प्लगइन का उपयोग करके दर्शक। 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">

उदाहरण सिपेट:

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

स्निपेट का विस्तार करें

— यश
स्रोत

5

मैंने पहले भी कुछ ऐसा ही किया है और सामान्य रूप से टैग का उपयोग किया है

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

लेकिन यह ऊपर के रूप में कुछ अन्य तरीके खोजने के लिए दिलचस्प है!

— DirWolf
स्रोत

2

तत्व सभी ब्राउज़रों द्वारा समर्थित है और एक HTML दस्तावेज़ के भीतर एक एम्बेडेड ऑब्जेक्ट को परिभाषित करता है।

नीचे पंक्ति: OBJECT अच्छा है, EMBED पुराना है। IE के PARAM टैग के अलावा, OBJECT टैग के बीच कोई भी सामग्री प्रदान की जाएगी यदि ब्राउज़र OBJECT के संदर्भित प्लगइन का समर्थन नहीं करता है, और जाहिर है, सामग्री http से अनुरोध करती है, भले ही वह प्रदान की जाए या नहीं। संदर्भ

कार्य कोड: 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>

स्निपेट का विस्तार करें

— सूफियान अंसारी
स्रोत

0

आप उपयोग कर सकते हैं

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

या, यदि आप इसे पूरा पृष्ठ बनाना चाहते हैं:

<a href="your_pdf_file_path>Link</a>

— aaron34weston
स्रोत