blocks|key|191540|text|你可以考虑使用Philip+Hutchison的PDFObject。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|191541|或者，如果您正在寻找非Javascript解决方案，您可以使用如下标记：|191542|<object+data="myfile.pdf"+type="application/pdf"+width="100%25"+height="100%25">
++<p>Alternative+text+-+include+a+link+<a+href="myfile.pdf">to+the+PDF!</a></p>
</object>|code-block|syntax|javascript|191543|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/pipwerks/PDFObject^0|O|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>You could consider using <a href="https://github.com/pipwerks/PDFObject" rel="noreferrer">PDFObject</a> by Philip Hutchison.</p>

<p>Alternatively, if you're looking for a non-Javascript solution, you could use markup like this:</p>

<pre><code>&lt;object data="myfile.pdf" type="application/pdf" width="100%" height="100%"&gt;
  &lt;p&gt;Alternative text - include a link &lt;a href="myfile.pdf"&gt;to the PDF!&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</code></pre>


blocks|key|409706|text|PDF.js是一项HTML5技术实验，旨在探索在没有本机代码帮助的情况下构建忠实而高效的可移植文档格式(+Portable+Document+Format+)渲染器。它是由社区驱动的，得到了Mozilla实验室的支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|409707|您可以查看演示here。|409708|entityMap|0|LINK|mutability|MUTABLE|url|https://mozilla.github.io/pdf.js/|1|https://mozilla.github.io/pdf.js/web/viewer.html^0|0|6|0|0|7|4|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p><a href="https://mozilla.github.io/pdf.js/" rel="noreferrer">PDF.js</a> is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance. It is community-driven and supported by Mozilla Labs.</p>

<p>You can see the demo <a href="https://mozilla.github.io/pdf.js/web/viewer.html" rel="noreferrer">here</a>.</p>


blocks|key|409784|text|请确保跨不同的Reader首选项测试任何解决方案。站点访问者可以将其浏览器设置为在Reader/Acrobat中而不是在浏览器中打开PDF，例如通过禁用Firefox中的Acrobat插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|409785|我不能确定我的结果，因为我有两个不同的Acrobat插件，Firefox可以识别，因为我有不同版本的Adobe+Acrobat和Adobe+Reader，但似乎你至少需要测试一下，如果网站访问者将他们的浏览器设置为不在浏览器中打开PDF会发生什么。当他们看到一个看起来很有用的网页时，他们的浏览器纠缠着他们打开一个他们认为自己没有请求的PDF文件，这可能是相当恼人的。在某些情况下，PDF文件会自发地在Adobe+Reader中打开，而不是在浏览器中打开，而在其他情况下，浏览器会弹出一个对话框，说明该文件不存在。|409786|我遇到了iframe和object两者的不匹配，不同代码的不同问题。|409787|这是针对简单的HTML代码的。我还没有尝试过建议的框架。|409788|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Be sure to test any solution across different Reader preferences.  A site visitor may have their browser set to open the PDF in Reader/Acrobat as opposed to the browser, e.g., by disabling the Acrobat plugin in Firefox..  </p>

<p>I can't be sure of my results, because I have two different Acrobat plugins that Firefox recognizes due to my having different versions of Adobe Acrobat and Adobe Reader, but it does appear that you at least need to test what happens if a website visitor has their browser set to not open the PDF in the browser.  It could be quite annoying when they look at what appears to be an otherwise usable web page and their browser is nagging them to open a PDF file that they think they didn't request.  In some cases, the PDF file spontaneously opened in Adobe Reader, not the browser, and in other cases the browser threw up a dialog saying the file didn't exist.</p>

<p>I ran into such mismatches with iframe and object both, different issues for different code.</p>

<p>This is for simple HTML code.  I haven't tried the suggested frameworks.</p>


blocks|key|191703|text|如果我没记错的话，操作员正在询问(尽管后来接受了.js解决方案)Google的嵌入式PDF显示服务器是否会在他自己的网站上显示PDF。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|191704|所以，一年半之后:是的，它会的。|191705|参见http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html。另外，请参阅https://docs.google.com/viewer，并插入要显示的文件的URL。|offset|length|191706|编辑:重读，OP正在寻求不使用iFrames的解决方案。我不认为谷歌的查看器能做到这一点。|191707|entityMap|0|LINK|mutability|MUTABLE|url|http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html|1|https://docs.google.com/viewer^0|0|0|2|26|0|2F|U|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]|$F|Z|G|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

<p>If I'm not mistaken, the OP was asking (although later accepted a .js solution) whether Google's embedded PDF display server will display a PDF on his own website.</p>

<p>So, one and a half years later: yes, it will.</p>

<p>See <a href="http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html" rel="noreferrer">http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html</a>.  Also, see <a href="https://docs.google.com/viewer" rel="noreferrer">https://docs.google.com/viewer</a>, and plug in the URL of the file you want to display.</p>

<p>Edit: Re-reading, OP was asking for solutions that don't use iFrames. I don't think that's possible with Google's viewer.</p>


blocks|key|409876|text|coolwanglu开发的pdf2htmlEX可能是将pdf文件转换成html的最佳解决方案。您可以做一个简单的转换，然后将html页面作为iframe或类似的东西嵌入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|409877|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>pdf2htmlEX by coolwanglu is probably the best solution out there to convert a pdf file into html. You could do a simple convert and then embed the html page as an iframe or something similar.</p>


blocks|key|191800|text|这样做可能会更好一些。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|191801|<embed+src=+"MyHome.pdf"+width=+"500"+height=+"375">|code-block|syntax|javascript|191802|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>This might work a little better this way</p>

<pre><code>&lt;embed src= "MyHome.pdf" width= "500" height= "375"&gt;
</code></pre>


blocks|key|409940|text|我真的会选择FlowPaper，特别是他们的新元素模式，可以在这里找到：https://flowpaper.com/demo/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|409941|它在保持文本清晰的同时显着地扁平化PDF，这意味着它在移动设备上的加载速度会快得多|409942|entityMap|0|LINK|mutability|MUTABLE|url|https://flowpaper.com/demo/^0|10|R|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]]]]

<p>I would really opt for FlowPaper, especially their new Elements mode that can be found here :
<a href="https://flowpaper.com/demo/" rel="nofollow">https://flowpaper.com/demo/</a></p>

<p>It flattens the PDFs significantly at the same time as keeping text sharp which means that it will load much faster on mobile devices</p>


blocks|key|191863|text|使用bootstrap，你可以有一个响应式的和移动端的第一个嵌入文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|191864|<div+class="embed-responsive+embed-responsive-16by9">
++<iframe+class="embed-responsive-item"+src="address+of+your+file"+allowfullscreen></iframe>
</div>

Aspect+ratios+can+be+customized+with+modifier+classes.

<div+class="embed-responsive+embed-responsive-21by9">
++<iframe+class="embed-responsive-item"+src="..."></iframe>
</div>


<div+class="embed-responsive+embed-responsive-16by9">
++<iframe+class="embed-responsive-item"+src="..."></iframe>
</div>


<div+class="embed-responsive+embed-responsive-4by3">
++<iframe+class="embed-responsive-item"+src="..."></iframe>
</div>


<div+class="embed-responsive+embed-responsive-1by1">
++<iframe+class="embed-responsive-item"+src="..."></iframe>
</div>|code-block|syntax|javascript|191865|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>using bootstrap you can have a responsive and mobile first embeded file.</p>

<pre><code>&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe class="embed-responsive-item" src="address of your file" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;

Aspect ratios can be customized with modifier classes.
&lt;!-- 21:9 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-21by9"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 16:9 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 4:3 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-4by3"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;!-- 1:1 aspect ratio --&gt;
&lt;div class="embed-responsive embed-responsive-1by1"&gt;
  &lt;iframe class="embed-responsive-item" src="..."&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>


<p>If I'm not mistaken, Google Docs offers the means to display a PDF that is stored on the same server as the web page via an <code>&lt;iframe&gt;</code>, but I need to know how I can do this in a cross-browser compliant way.</p>


How to embed a PDF viewer in a page?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如果我没记错的话，Google Docs提供了通过<iframe>显示存储在同一台服务器上的PDF的方法，但我需要知道如何以跨浏览器兼容的方式来实现这一点。

问如何在页面中嵌入PDF查看器？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面中嵌入PDF查看器？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面中嵌入PDF查看器？
EN