如何在网页中显示 PDF 9035 | 特厉害计划
  • Why Github?
  • Team
  • Enterprise
  • Explore
  • Marketplace
  • Pricing
Sign inSign up
Watch996
Star102.4k
Fork61.8k
Tag: learning.web
Switch branches/tags
Branches
Tags
K / 如何在网页中显示 PDF.md
38 lines 4.65 KB
First commit on 17 Jun 2020

    pdf.js

    GitHub: https://github.com/mozilla/pdf.js

    Online demo: http://mozilla.github.com/pdf.js/web/viewer.html

    <iframe style="width:100%;height:500px"
    src="http://mozilla.github.com/pdf.js/web/viewer.html?file=http://foo.com/bar.pdf">
    </iframe>
    

    embed

    <embed> 已经纳入 HTML5 标准,新浏览器通用,早期 IE 只支持 object,其他浏览器只支持 embed,现在简单嵌入资源两个标签基本一样。

    embed 是自闭和标签,object 则可以在资源加载失败时显示标签内的内容。

    <embed src="the.pdf" width="500" height="375" type="application/pdf">
    

    UPDATE (1/2018):

    The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer

    <embed
    src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://foo.com/bar.pdf"
    width="500" height="375">
    

    object

    <object type="application/pdf" data="filename.pdf" width="100%" height="100%">
    </object>
    

    以前有些浏览器不支持 <embed>,而老的 IE 不支持 <object>,所以可以这样混合用:

    <object data="abc.pdf" type="application/pdf">
        <embed src="abc.pdf" type="application/pdf" />
    </object>
    

    测试

    embed

    object

    iframe

    直接使用 <iframe src="test.pdf"></iframe>

    参考资料:

    https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html https://stackoverflow.com/questions/1244788/embed-vs-object