blocks|key|1019381|text|我使用Google+Docs嵌入式PDF查看器。这些文档不需要上传到Google+Docs，但它们必须在网上提供。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019382|<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>|code-block|syntax|javascript|1019383|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|$]]

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.

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

blocks|key|804804|text|与其使用iframe并依赖于第三方，不如考虑使用flexpaper或pdf.js。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|804805|我用的是PDF.js，它对我来说很好。Here+is+the+demo。|offset|length|804806|entityMap|0|LINK|mutability|MUTABLE|url|http://mozilla.github.com/pdf.js/|1|http://mozilla.github.com/pdf.js/web/viewer.html^0|0|4|6|0|J|G|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]|$D|U|E|V|1|W]]|A|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|O]]]]

instead of using iframe and depending on the third party`think about using flexpaper, or pdf.js.

I used <a href="http://mozilla.github.com/pdf.js/" rel="nofollow noreferrer">PDF.js</a>, it works fine for me. <a href="http://mozilla.github.com/pdf.js/web/viewer.html" rel="nofollow noreferrer">Here is the demo</a>.

blocks|key|1019491|text|首选使用object标记|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019492|<object+data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'+
++++++++type='application/pdf'+
++++++++width='100%25'+
++++++++height='700px'>|code-block|syntax|javascript|1019493|请注意，您可以将宽度和高度更改为您可以访问http://www.w3schools.com/tags/tag_object.asp的任何值|offset|length|1019494|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/tags/tag_object.asp^0|0|0|L|18|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

preffered using the object tag

<pre><code>&lt;object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
 type='application/pdf' 
 width='100%' 
 height='700px'&gt;
</code></pre>

note that you can change the width and height to any value you please visit
<a href="http://www.w3schools.com/tags/tag_object.asp" rel="noreferrer">http://www.w3schools.com/tags/tag_object.asp</a>

blocks|key|1019327|text|最简单的方法是创建一个iframe，并将源设置为该文件的URL。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1019328|(ducks+mad+HTML+designers)我自己做的，运行良好，跨浏览器(爬入到掩体中)。|1019329|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe^0|B|6|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

The simplest way is to create an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" rel="noreferrer">iframe</a> and set the source to the URL of the PDF.

(ducks mad HTML designers) Done it myself, works fine, cross browser (crawls into bunker).

blocks|key|804630|text|浏览器的插件控制着这些设置，所以你不能强制它。但是，您可以使用简单的<a+href="whatver.pdf">而不是<a+href="whatever.pdf"+target="_blank">。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|804631|entityMap^0|Y|M|1N|13|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

The browser's plugin controls those settings, so you can't force it. However, you can do a simple <code>&lt;a href="whatver.pdf"&gt;</code> instead of <code>&lt;a href="whatever.pdf" target="_blank"&gt;</code>.

blocks|key|804658|text|您还可以通过PDFObject等第三方解决方案使用JavaScript进行嵌入。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|804659|entityMap|0|LINK|mutability|MUTABLE|url|http://pdfobject.com/^0|6|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can also embed using JavaScript through a third-party solution like <a href="http://pdfobject.com/" rel="nofollow">PDFObject</a>.

blocks|key|1019467|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019468|<embed+src="http://domain.com/your_pdf.pdf"+width="600"+height="500"+alt="pdf"+pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">|code-block|syntax|javascript|1019469|或者使用Google+Docs嵌入式PDF查看器：|1019470|<iframe+src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"+
style="width:600px;+height:500px;"+frameborder="0"></iframe>|1019471|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|$]]

You can use this code:

<pre><code>&lt;embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"&gt;
</code></pre>

Or use Google Docs embeddable PDF viewer:

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

blocks|key|804940|text|您也可以使用这种简单的GoogleDoc方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|804941|<a++style="color:+green;"+href="http://docs.google.com/gview?url=http://domain//docs/<?php+echo+$row['docname']+;?>"+target="_blank">View</a>|code-block|syntax|javascript|804942|这将为您创建一个新页面，以便在不扭曲流程的情况下查看文档。|804943|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|$]]

You can also have this simple GoogleDoc approach.

<pre><code>&lt;a style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/&lt;?php echo $row['docname'] ;?&gt;" target="_blank"&gt;View&lt;/a&gt;
</code></pre>

This would create a new page for you to view the doc without distorting your flow.

blocks|key|1019234|text|简单的解决方案是将其放在一个iframe中，并希望用户有一个支持它的插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019235|(我不这样认为，Acrobat插件一直是如此的资源浪费和不稳定的来源，以至于我特别指出要从它接触到的任何浏览器中删除它)。|1019236|复杂但相对流行的解决方案是在flash+applet中显示它。|1019237|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

The simple solution is to put it in an iframe and hope that the user has a plug-in that supports it.

(I don't, the Acrobat plugin has been such a resource hog and source of instability that I make a point to remove it from any browser that it touches).

The complicated, but relative popular solution is to display it in a flash applet.

blocks|key|804719|text|我们使用JPedal+(+java库)在服务器上将PNG文件页面呈现为PNG文件。再加上一些javascript，我们可以对可视化和导航进行更高的控制。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|804720|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jpedal.org/^0|4|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

We render the PDF file pages as PNG files on the server using <a href="http://www.jpedal.org/" rel="nofollow">JPedal</a> (a java library). That, combined with some javascript, gives us high control over visualization and navigation.

blocks|key|804913|text|显示以PDF/DOC/DOCX文件格式is+ideal+for+displaying+the+pdf/doc/docx+file+on+your+web+page保存的内容|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|804914|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/17784037/how-to-display-pdf-file-in-html^0|J|1Q|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Displaying content saved in PDF/DOC/DOCX file format <a href="https://stackoverflow.com/questions/17784037/how-to-display-pdf-file-in-html">is ideal for displaying the pdf/doc/docx file on your web page</a>

blocks|key|1019593|text|你有没有试过使用简单的img标签？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019594|<img+scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">|code-block|syntax|javascript|1019595|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|$]]

Have you tried using a simple img tag?

<pre><code>&lt;img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf"&gt;
</code></pre>

问在web浏览器中显示PDF
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在web浏览器中显示PDFEN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在web浏览器中显示PDF
EN