blocks|key|182730|text|如果你想使用pdf.js，我建议你阅读THIS|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|182731|你也可以上传你的pdf文件到某个地方(如Google+Drive)，并在iframe中使用它的URL|182732|或|182733|<object+data="data/test.pdf"+type="application/pdf"+width="300"+height="200">
<a+href="data/test.pdf">test.pdf</a>
</object>|code-block|syntax|javascript|182734|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9328551/how-to-use-pdf-js^0|J|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>If you want to use pdf.js, I suggest you to read <a href="https://stackoverflow.com/questions/9328551/how-to-use-pdf-js">THIS</a></p>

<p>You can also upload your pdf somewhere (like Google Drive) and use its URL in a iframe</p>

<p>or </p>

<pre><code>&lt;object data="data/test.pdf" type="application/pdf" width="300" height="200"&gt;
&lt;a href="data/test.pdf"&gt;test.pdf&lt;/a&gt;
&lt;/object&gt;
</code></pre>


blocks|key|180379|text|在您的HTML网页中实现PDF文件是非常容易的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180380|<embed+src="file_name.pdf"+width="800px"+height="2100px"+/>|code-block|syntax|javascript|180381|确保根据需要更改宽度和高度。祝好运!|180382|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Implementation of a PDF file in your HTML web-page is very easy.</p>

<pre><code>&lt;embed src="file_name.pdf" width="800px" height="2100px" /&gt;
</code></pre>

<p>Make sure to change the width and height for your needs.
Good luck!</p>


blocks|key|2795106|text|我使用Google+Docs嵌入式PDF查看器。这些文档不需要上传到Google+Docs，但它们必须在网上提供。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795107|<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>|code-block|syntax|javascript|2795108|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.</p>

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


blocks|key|184516|text|在pc上html页面很容易实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|184517|<embed+src="study/sample.pdf"+type="application/pdf"+++height="300px"+width="100%25">|code-block|syntax|javascript|184518|但pdf显示在手机上的这个代码是不可能的，你必须需要一个插件|184519|如果你没有回应你的网站。那么上面的代码pdf就不会在手机上显示，但是你可以在代码后面加上下载选项。|184520|<embed+src="study/sample.pdf"+type="application/pdf"+++height="300px"+width="100%25"+class="responsive">
<a+href="study/sample.pdf">download</a>|184521|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>In html page for pc is easy to implement</p>

<pre><code>&lt;embed src="study/sample.pdf" type="application/pdf"   height="300px" width="100%"&gt;
</code></pre>

<p>but pdf show in mobile by this code is not possible you must need a plugin </p>

<p>if you have not responsive your site. Then above code pdf not show in mobile but you can put download option after the code </p>

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


blocks|key|2795160|text|您可以轻松地在html页面中显示，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795161|​|2795162|<embed+src="path_of_your_pdf/your_pdf_file.pdf"+type="application/pdf"+++height="700px"+width="500">|code-block|syntax|javascript|2795163|2795164|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>you can display easly in a html page like this </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|182784|text|可移植文档格式()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|182785|在iframe.中使用|offset|length|style|CODE|182786|Any+Browser«使用_Embeddable+Google+Document+Viewer嵌入|unordered-list-item|182787|182788|182789|仅适用于chrome浏览器«使用插件的Chrome+PDF查看器。pluginspage=http://www.adobe.com/products/acrobat/readstep2.html。|182790|182791|182792|示例Sippet：|182793|​|182794|<html>
+++<head></head>
+++<body+style="+height:+100%25;">
++++++<div+style="+position:+relative;">
++++++<div+style="width:+100%25;+/*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>
+++++++++
+++++++++<div+style="/*+overflow:+scroll;+*/+max-height:+500;+float:+left;+width:+49%25;+height:+100%25;+">
++++++++++++<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%25,+transparent+25%25,+transparent+75%25,+#eee+75%25,+#eee+100%25),linear-gradient(45deg,+#eee+25%25,+white+25%25,+white+75%25,+#eee+75%25,+#eee+100%25);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%25;+background-color:+red;"></div>
+++++++++<div+style="float:+left;width:+49%25;+">
++++++++++++<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%25;overflow:+auto;position:+relative;height:+auto;+margin-top:+70px;">
++++++<video+style="height:+500px;width:+100%25;"+name="media"+controls="controls">
+++++++++
+++++++++<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%25;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%25;+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%25"+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%25;+background-color:+red;"></div>
++++++++++++<div+style="float:+left;width:+49%25;+">
+++++++++++++++<iframe+src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7"+style=""+width="100%25"+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>|code-block|syntax|javascript|182795|182796|entityMap|0|LINK|mutability|MUTABLE|url|https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html#gsc.tab=0^0|0|1|6|0|E|Y|0|0|0|0|X|1S|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|K|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1P|8|@]|9|@]|A|$X|Y]]|$1|Z|3|T|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<p>Portable Document Format (<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&amp;mv=other" rel="noreferrer"><strong>PDF</strong></a>).</p>

<ul>
<li><p>Any Browser « Use <a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html#gsc.tab=0" rel="noreferrer">_Embeddable Google Document Viewer</a> to embed the PDF file in <code>iframe</code>.</p>



<pre class="lang-html prettyprint-override"><code>&lt;iframe src="http://docs.google.com/gview?
    url=http://infolab.stanford.edu/pub/papers/google.pdf&amp;embedded=true"
    style="width:600px; height:500px;" frameborder="0"&gt;
&lt;/iframe&gt;
</code></pre>

</li>
<li><p>Only for chrome browser « Chrome PDF viewer using plugin. <code>pluginspage=http://www.adobe.com/products/acrobat/readstep2.html</code>.
</p>

<pre class="lang-html prettyprint-override"><code>&lt;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"&gt;
</code></pre>

</li>
</ul>

<p>Example Sippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;&lt;/head&gt;
   &lt;body style=" height: 100%;"&gt;
      &lt;div style=" position: relative;"&gt;
      &lt;div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;"&gt;
         &lt;p&gt;An 
            &lt;a href="https://en.wikipedia.org/wiki/Image_file_formats" &gt;image&lt;/a&gt; is an artifact that depicts visual perception
         &lt;/p&gt;
         &lt;!-- To make div with scroll data [max-height: 500;]--&gt;
         &lt;div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; "&gt;
            &lt;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;" /&gt;
            &lt;p&gt;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. 
               &lt;a href="http://www.chestysoft.com/imagefile/streaming.asp" &gt;StreamToBrowser&lt;/a&gt;
            &lt;/p&gt;
         &lt;/div&gt;
         &lt;div style="float: left; width: 10%; background-color: red;"&gt;&lt;/div&gt;
         &lt;div style="float: left;width: 49%; "&gt;
            &lt;img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/&gt;
            &lt;p&gt;Streaming an Image form Base64 String « embedding images directly into your HTML.
               &lt;a href="https://en.wikipedia.org/wiki/Data_URI_scheme"&gt;
               &lt;sup&gt;Data URI scheme&lt;/sup&gt;
               &lt;/a&gt;
               &lt;a href="https://codebeautify.org/image-to-base64-converter"&gt;
               &lt;sup&gt;, Convert Your Image to Base64&lt;/sup&gt;
               &lt;/a&gt;
            &lt;pre&gt;data:[&amp;lt;media type&amp;gt;][;base64],&amp;lt;data&amp;gt;&lt;/pre&gt;
            &lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;"&gt;
      &lt;video style="height: 500px;width: 100%;" name="media" controls="controls"&gt;
         &lt;!-- autoplay --&gt;
         &lt;source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4"&gt;
         &lt;source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg"&gt;
      &lt;/video&gt;
      &lt;p&gt;Video courtesy of 
         &lt;a href="https://www.bigbuckbunny.org/" &gt;Big Buck Bunny&lt;/a&gt;.
      &lt;/p&gt;
      &lt;div&gt;
         &lt;div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;"&gt;
            &lt;p&gt;Portable Document Format 
               &lt;a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&amp;mv=other" &gt;(PDF)&lt;/a&gt;.
            &lt;/p&gt;
            &lt;div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;"&gt;
               &lt;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"&gt;
               &lt;p&gt;Chrome PDF viewer 
                  &lt;a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo"&gt;
                  &lt;sup&gt;extension&lt;/sup&gt;
                  &lt;/a&gt;
                  &lt;a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc"&gt;
                  &lt;sup&gt; (surfingkeys)&lt;/sup&gt;
                  &lt;/a&gt;
               &lt;/p&gt;
            &lt;/div&gt;
            &lt;div style="float: left; width: 10%; background-color: red;"&gt;&lt;/div&gt;
            &lt;div style="float: left;width: 49%; "&gt;
               &lt;iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&amp;embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""&gt;&lt;/iframe&gt;
               &lt;p&gt;Embeddable 
                  &lt;a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" &gt;Google&lt;/a&gt; Document Viewer. Here's the code I used to embed the PDF file: 
&lt;pre&gt;
&amp;lt;iframe 
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&amp;embedded=true" 
style="width:600px; height:500px;" frameborder="0"&amp;gt;&amp;lt;/iframe&amp;gt;
&lt;/pre&gt;
               &lt;/p&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|181855|text|我以前也有过类似的东西，并使用了普通的标签|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181856|<a+href="path_of_your_pdf/your_pdf_file.pdf"+tabindex="-1"><strong>click+here</strong></a>|code-block|syntax|javascript|181857|但有趣的是发现了上面提到的一些其他方法！|181858|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I've had something similar before and used normally  tags</p>

<pre><code>&lt;a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"&gt;&lt;strong&gt;click here&lt;/strong&gt;&lt;/a&gt;
</code></pre>

<p>but it's interesting to find out some other ways as above!</p>


blocks|key|3007875|text|最简单的方法是使用，|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3007876|<iframe+src="pdf-link">
</iframe>|code-block|syntax|javascript|3007877|如果它仍然获得下载的而不是查看，请检查服务器响应头，它应该有Content-Disposition:Inline而不是Content-Disposition:Attachment。|CODE|3007878|entityMap^0|0|4|0|0|7|3|U|Q|1N|U|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|M]|$9|Y|A|Z|B|M]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|O|$]]

<p>The <strong>simplest</strong> way is to use,</p>

<pre><code>&lt;iframe src="pdf-link"&gt;
&lt;/iframe&gt;
</code></pre>

<p>and if its still getting <strong>downloaded</strong> instead of viewing, check the server response header, it should have, <code>Content-Disposition:Inline</code> and not, <code>Content-Disposition:Attachment</code>.</p>


blocks|key|181907|text|所有浏览器都支持该元素，并在HTML文档中定义了一个嵌入对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181908|181909|底线:+OBJECT是好的，EMBED是旧的。除了IE的PARAM标签之外，如果浏览器不支持OBJECT的引用插件，则将呈现OBJECT标签之间的任何内容，显然，无论是否呈现内容，都会获得http请求。Reference|blockquote|offset|length|181910|181911|181912|工作代码：https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6|181913|​|181914|<!DOCTYPE+html>
<html>
<body>

<object+width="400px"+height="400px"+data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>|code-block|syntax|javascript|181915|181916|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/1244854/3443247|1|https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6^0|0|0|2T|9|0|0|0|0|5|1Q|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|15|8|@]|9|@$F|16|G|17|1|18]]|A|$]]|$1|H|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1B|8|@]|9|@$F|1C|G|1D|1|1E]]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1G|8|@]|9|@]|A|$Q|R]]|$1|S|3|M|5|6|7|1H|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]|11|$5|W|X|Y|A|$Z|12]]]]

<p>The  element is supported by all browsers and defines an embedded object within an HTML document.</p>

<blockquote>
  <p>Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not. <a href="https://stackoverflow.com/a/1244854/3443247">Reference</a></p>
</blockquote>

<p>Working code: <a href="https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6" rel="noreferrer">https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6</a> </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"&gt;&lt;/object&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2795446|text|HTML1.HTML浏览器原生内联嵌入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2795447|<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%25"
++++width="100%25"
></embed>|code-block|syntax|javascript|2795448|<iframe
++++src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
++++frameBorder="0"
++++scrolling="auto"
++++height="100%25"
++++width="100%25"
></iframe>|2795449|优点：|2795450|2795451|没有PDF文件大小限制(甚至几百MB)|unordered-list-item|2795452|这是最快的解决方案|2795453|2795454|缺点：|2795455|2795456|It不适用于移动浏览器|2795457|2795458|2795459|2.谷歌文档浏览器：|offset|length|style|BOLD|2795460|<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%25"
++++width="100%25"
></iframe>|2795461|2795462|2795463|可在桌面和移动浏览器|2795464|上运行|2795465|2795466|下载查看器limit|2795467|Requires+所需的额外时间|2795468|25MB文件|2795469|2795470|2795471|2795472|PDF+3.嵌入的其他解决方案：|2795473|2795474|https://mozilla.github.io/pdf.js|2795475|https://pdfobject.com|2795476|https://viewerjs.org|2795477|2795478|2795479|重要说明：|2795480|请检查X-Frame-Options+HTTP响应头。应该是SAMEORIGIN。|2795481|X-Frame-Options+SAMEORIGIN;|2795482|entityMap|0|LINK|mutability|MUTABLE|url|1|https://pdfobject.com/|2|https://viewerjs.org/^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|A|0|0|0|0|0|0|0|0|0|0|0|0|0|8|8|0|0|0|W|0|0|0|L|1|0|0|K|2|0|0|0|0|5|0|0|0^^$0|@$1|2|3|4|5|6|7|2E|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|2F|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|2G|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|2H|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|2J|8|@]|9|@]|A|$]]|$1|O|3|P|5|N|7|2K|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|2L|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|2M|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|2O|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|2P|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2R|8|@$10|2S|11|2T|12|13]]|9|@]|A|$]]|$1|14|3|15|5|D|7|2U|8|@]|9|@]|A|$E|F]]|$1|16|3|J|5|6|7|2V|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|2W|8|@]|9|@]|A|$]]|$1|18|3|19|5|N|7|2X|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1C|3|S|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|30|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|N|7|31|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|N|7|32|8|@]|9|@]|A|$]]|$1|1J|3|-4|5|6|7|33|8|@]|9|@]|A|$]]|$1|1K|3|-4|5|6|7|34|8|@]|9|@]|A|$]]|$1|1L|3|-4|5|6|7|35|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|36|8|@$10|37|11|38|12|13]]|9|@]|A|$]]|$1|1O|3|-4|5|6|7|39|8|@]|9|@]|A|$]]|$1|1P|3|1Q|5|N|7|3A|8|@]|9|@$10|3B|11|3C|1|3D]]|A|$]]|$1|1R|3|1S|5|N|7|3E|8|@]|9|@$10|3F|11|3G|1|3H]]|A|$]]|$1|1T|3|1U|5|N|7|3I|8|@]|9|@$10|3J|11|3K|1|3L]]|A|$]]|$1|1V|3|-4|5|6|7|3M|8|@]|9|@]|A|$]]|$1|1W|3|-4|5|6|7|3N|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|6|7|3O|8|@$10|3P|11|3Q|12|13]]|9|@]|A|$]]|$1|1Z|3|20|5|6|7|3R|8|@]|9|@]|A|$]]|$1|21|3|22|5|D|7|3S|8|@]|9|@]|A|$E|F]]|$1|23|3|-4|5|6|7|3T|8|@]|9|@]|A|$]]]|24|$25|$5|26|27|28|A|$29|1Q]]|2A|$5|26|27|28|A|$29|2B]]|2C|$5|26|27|28|A|$29|2D]]]]

<p><strong>1. Browser-native HTML inline embedding:</strong></p>

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

<pre><code>&lt;iframe
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&amp;navpanes=0&amp;scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
&gt;&lt;/iframe&gt;
</code></pre>

<p><em>Pro:</em></p>

<ul>
<li>No PDF file size limitations (even hundreds of MB)</li>
<li>It’s the fastest solution</li>
</ul>

<p><em>Cons:</em></p>

<ul>
<li>It doesn’t work on mobile browsers</li>
</ul>

<hr>

<p><strong>2. Google Docs Viewer:</strong></p>

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

<p><em>Pro:</em></p>

<ul>
<li>Works on desktop and mobile browser </li>
</ul>

<p><em>Cons:</em></p>

<ul>
<li>25MB file limit</li>
<li>Requires additional time to download viewer</li>
</ul>

<hr>

<p><strong>3. Other solutions to embed PDF:</strong></p>

<ul>
<li><a href="https://mozilla.github.io/pdf.js" rel="noreferrer">https://mozilla.github.io/pdf.js</a></li>
<li><a href="https://pdfobject.com" rel="noreferrer">https://pdfobject.com</a></li>
<li><a href="https://viewerjs.org" rel="noreferrer">https://viewerjs.org</a></li>
</ul>

<hr>

<p><strong>IMPORTANT NOTE:</strong></p>

<p>Please check the X-Frame-Options HTTP response header. <em>It should be SAMEORIGIN.</em></p>

<pre><code>X-Frame-Options SAMEORIGIN;
</code></pre>


blocks|key|181942|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181943|<iframe+src="your_pdf_file_path"+height="100%25"+width="100%25"+scrolling="auto"></iframe>|code-block|syntax|javascript|181944|或者，如果你想让它占据整个页面：|181945|<a+href="your_pdf_file_path">Link</a>|181946|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use</p>
<pre><code>&lt;iframe src=&quot;your_pdf_file_path&quot; height=&quot;100%&quot; width=&quot;100%&quot; scrolling=&quot;auto&quot;&gt;&lt;/iframe&gt;
</code></pre>
<p>Or, if you want to make it take up the whole page:</p>
<pre><code>&lt;a href=&quot;your_pdf_file_path&quot;&gt;Link&lt;/a&gt;
</code></pre>


blocks|key|3008004|text|我知道你想用HTMl显示，但你也可以用php打开PDF文件，指出路径，浏览器会在几个简单的步骤中渲染它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3008005|<?php
$your_file_name+=+"url_here";

//Content+type+and+this+case+its+a+PDF
header("Content-type:+application/pdf");

header("Content-Length:+"+.+filesize($your_file_name+));+

//Display+the+file
readfile($your_file_name+);
?>|code-block|syntax|javascript|3008006|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I understand you want to display using HTMl but you can also open the PDF file using php by pointing out the path and the browser will render it in a few simple steps</p>
<pre><code>&lt;?php
$your_file_name = &quot;url_here&quot;;

//Content type and this case its a PDF
header(&quot;Content-type: application/pdf&quot;);

header(&quot;Content-Length: &quot; . filesize($your_file_name )); 

//Display the file
readfile($your_file_name );
?&gt;
</code></pre>


blocks|key|180550|text|此外，此方法也很有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|180551|在桌面和移动浏览器上显示pdf文件：|offset|length|style|BOLD|180552|​|180553|<object+data="./filename.pdf"+type="application/pdf"+width="500px"+height="600px">
++<p>Your+web+browser+doesn't+have+a+PDF+plugin.
+++<a+href="./filename.pdf">click+here+to+download+the+PDF+file.</a></p>
</object>|code-block|syntax|javascript|180554|180555|entityMap^0|0|1|2|4|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|Q|$]]

<p>Also this method is useful:</p>
<p>Displaying pdf file on <strong>desktop</strong> and <strong>mobile</strong> browsers:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;object data="./filename.pdf" type="application/pdf" width="500px" height="600px"&gt;
  &lt;p&gt;Your web browser doesn't have a PDF plugin.
   &lt;a href="./filename.pdf"&gt;click here to download the PDF file.&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3008146|text|更新-+Adobe+PDF+Embed+API|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3008147|奥多比发布了他们的Adobe+PDF+Embed+API，这是完全免费的。因为他们自己创建了PDF格式，所以他们的API可能是最好的。|offset|length|3008148|3008149|它提供了可用的最高质量的PDF呈现。|unordered-list-item|3008150|您可以完全自定义用户体验并选择如何显示PDF。|3008151|您还可以分析PDF的使用情况，以便了解用户与PDF交互的方式，包括在页面上花费的时间和搜索。|3008152|3008153|您所要做的就是创建一个api_key并在代码片段中使用它。|style|CODE|3008154|将PDF显示为缓冲区(例如本地文件)|3008155|下面是代码片段的示例，如果有缓冲区(例如本地文件)，您可以将其添加到HTML中，并利用它们的API来显示PDF。|3008156|<div+id="adobe-dc-view"></div>

<script+src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script+type="text/javascript">
++document.addEventListener("adobe_dc_view_sdk.ready",+function(){
++++var+adobeDCView+=+new+AdobeDC.View({clientId:+"api_key",+divId:+"adobe-dc-view"});
++++adobeDCView.previewFile({
++++++content:+{+promise:+<FILE_PROMISE>+}
++++++metaData:+{+fileName:+"file_name_to_display"+}
++++},+{});
++});
</script>|code-block|syntax|javascript|3008157|entityMap|0|LINK|mutability|MUTABLE|url|https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html^0|0|9|J|0|0|0|0|0|0|0|B|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|F|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|1F|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|I|7|1H|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1J|8|@$D|1K|E|1L|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|1O|8|@]|9|@]|A|$Z|10]]|$1|11|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]]]

<h1>Update - Adobe PDF Embed API</h1>
<p>Adobe released their <a href="https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html" rel="nofollow noreferrer">Adobe PDF Embed API</a> which is completely free. Since they created the PDF format itself, their API is probably the best for this.</p>
<ul>
<li>It delivers the highest quality PDF rendering available.</li>
<li>You can fully customize user experience and choose how to display a PDF.</li>
<li>You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.</li>
</ul>
<p>All you have to do is create an <code>api_key</code> and use it in the code snippet.</p>
<h4>Displaying PDF as buffer (local file for example)</h4>
<p>Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example).</p>
<pre><code>&lt;div id=&quot;adobe-dc-view&quot;&gt;&lt;/div&gt;

&lt;script src=&quot;https://documentcloud.adobe.com/view-sdk/main.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
  document.addEventListener(&quot;adobe_dc_view_sdk.ready&quot;, function(){
    var adobeDCView = new AdobeDC.View({clientId: &quot;api_key&quot;, divId: &quot;adobe-dc-view&quot;});
    adobeDCView.previewFile({
      content: { promise: &lt;FILE_PROMISE&gt; }
      metaData: { fileName: &quot;file_name_to_display&quot; }
    }, {});
  });
&lt;/script&gt;
</code></pre>


<p>I have an auto generated PDF file by <strong>itext</strong> and I need to display that PDF file in HTML.  My question is: How to display a local PDF file in HTML using <strong>pdf.js</strong>? Should that PDF file be generated by some standards?</p>


How to display PDF file in HTML?

服务器

我有一个自动生成的PDF文件由itext，我需要显示该PDF文件在超文本标记语言。我的问题是:如何使用pdf.js在HTML中显示本地PDF文件？该PDF文件是否应该由某些标准生成？

问如何在HTML中显示PDF文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中显示PDF文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中显示PDF文件？
EN