在HTML中插入PDF

Keywords: #技术 #HTML
Table of Contents

在 HTML 中插入 PDF 有多种方式：iframe、embed、object 等

iframe 标签

iframe | MDN

优点：兼容性好，几乎所有浏览器都支持 iframe 标签，属性多，支持回退方案

缺点：需要指定头信息：Content-Type: application/pdf，否则浏览器会自动下载文件

<iframe
   src="./test.pdf"
   title="iframe Example 1"
   width="400"
   height="300" 
   allow="fullscreen">
   你的浏览器不支持PDF展示，请<a href="./test.pdf">下载PDF</a>后查看
</iframe>

需要注意的是，iframe 中的 width 和 height 属性只能指定像素大小，不能指定视口宽高。如果需要指定可以通过 style 属性来指定 css ，如：

<iframe
   src="./test.pdf"
   style="width:100%;height:100vh;border:none;"
   allow="fullscreen">
</iframe>

虽然 iframe 标签浏览器兼容性好，并且属性很多、方便自定义，但是需要注意其中的很多属性，不同的浏览器支持情况并不一样。

embed 标签

embed | MDN

优点：标签自闭合，编写简单

缺点：兼容性不好，有些浏览器需要插件的支持；标签自闭合，不提供回退方案

<embed src="./test.pdf" type="application/pdf" width=640 height=480">

不同于 iframe 标签，embed 标签可以指定展示文件的类型，如 PDF 可以写 type="application/pdf" 来防止浏览器自动下载

同样的 embed 中的 width 和 height 属性都是指定像素大小，要使用视口高度可以使用 style 属性：

<embed src="./test.pdf" type="application/pdf" style="width:100%;height:100vh;">

object 标签

object | MDN

优点：浏览器兼容性好，属性多，支持多种类型文件，提供回退方案

缺点：语法属性复杂

<object 
   data="./test.pdf" 
   type="application/pdf"
   width="400"
   height="300">
   你的浏览器不支持PDF展示，请<a href="./test.pdf">下载PDF</a>后查看
</object>

与 embed 类似，指定展示文件的类型，如 PDF 可以写 type="application/pdf" 来防止浏览器自动下载

同样可以使用 style 属性来指定 css，而不是使用 width 和 height 来指定像素宽高

总结

  • 使用 <iframe>：当需要嵌入完整的网页或需要一个独立网页元素时。
  • 使用 <embed>：当需要快速嵌入多媒体内容，并且需要简洁的语法时。
  • 使用 <object>：当需要嵌入多种类型的内容，并且希望提供备用内容时。
← prev next →