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




list of html tags and their uses (7)

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

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

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


आप इस तरह के एक एचटीएमएल पेज में आसानी से प्रदर्शित कर सकते हैं

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


पीसी के लिए एचटीएमएल पेज में लागू करना आसान है

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

पोर्टेबल दस्तावेज़ प्रारूप ( PDF )।

  • किसी भी ब्राउज़र « iframe में पीडीएफ फ़ाइल एम्बेड करने के लिए _Embeddable Google दस्तावेज़ दर्शक का उपयोग करें।

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


यदि आप पीडीएफ.जेएस का उपयोग करना चाहते हैं, तो मैं आपको यह पढ़ने के लिए सुझाव देता हूं

आप कहीं भी अपना पीडीएफ अपलोड कर सकते हैं (जैसे Google ड्राइव) और आईफ़्रेम में अपना यूआरएल इस्तेमाल करें

या

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

OneDrive विकल्प:

मैंने OneDrive का उपयोग करने की कोशिश की और इसे बेहतर पसंद किया क्योंकि यह नए टैब में खुले सहित विभिन्न विकल्पों को दिखाता है और वर्तमान में कौन सा पृष्ठ सक्रिय है और एक नई विंडो में खोलने का विकल्प भी है।

आपको बस इतना करना है:

  1. अपनी फ़ाइल को OneDrive खाते में अपलोड करें
  2. फ़ाइल का चयन करें और "एम्बेड करें" पर क्लिक करें
  3. कोड कॉपी करें और आप जाने के लिए अच्छे हैं!

OneDrive फ़ाइल को देखने के लिए उपयोगकर्ताओं को OneDrive में लॉग इन करने की आवश्यकता नहीं है और दर्शक बहुत उत्तरदायी आते हैं।

<iframe src="https://onedrive.live.com/embed?cid=54ED32C07853E1A8&resid=54ED32C07853E1A8%2137025&authkey=AKS95k1Xm-uE1lA&em=2" width="476" height="288" frameborder="0" scrolling="no"></iframe>

जावास्क्रिप्ट का उपयोग करना, मोज़िला के पीडीएफ.जेएस लाइब्रेरी के माध्यम से एचटीएमएल में पीडीएफ फाइल प्रदर्शित करना संभव है। डेमो के लिए यहां देखें

पीडीएफ फाइलों को एम्बेड करने के लिए पीडीएफ व्यूअर जावास्क्रिप्ट प्लगइन भी है। यहां एक डेमो है । (प्लगइन मुक्त नहीं है)





pdf