封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

myzbx 2025-01-12 16:48 43 浏览

在页面中嵌入PDF文件

在上一篇《在html页面中嵌入其他页面的方法——零基础自学网页制作》（结尾见目录）中我们学习了如何在页面中嵌入其他页面的操作。今天我们来嵌入一个pdf文件。

其实使用<iframe>标签也可以导入pdf标签，就是把pdf文件路径赋予src属性就可以了。

示例代码如下：

<body>
  <iframe width="100%" height="900px" src="pdf/人工智能游戏编程真言.pdf"></iframe>
</body>

页面效果如下：

考虑到pdf的版权问题就不给大家上传云盘了，大家可以找其他pdf文件代替即可。如果您对这本书感兴趣可以关注并私信我。

除此之外再给大家介绍两个新标签。

一个是<embed/>标签，一个是<object></object>标签。

设置长宽的操作都一样，示例代码如下：

<body>
  <iframe width="100%" height="300px" src="pdf/人工智能游戏编程真言.pdf"></iframe>
  <embed width="100%" height="300px" src="pdf/人工智能游戏编程真言.pdf"/>
  <object width="100%" height="300px" data="pdf/人工智能游戏编程真言.pdf"></object>
</body>

页面效果如下：

实际上，<embed>和<object>也可以显示页面，示例代码如下：

<body>
  <iframe width="100%" height="300px" src="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"></iframe> 
  <embed width="100%" height="300px" src="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"/>
  <object width="100%" height="300px" data="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin"></object>
</body>

页面显示效果如下：

除了页面和pdf文件外，这三个标签均可以嵌入图片，示例代码如下：

<body>
  <iframe width="100%" height="300px" src="image1.jpg"></iframe>
  <embed width="100%" height="300px" src="image1.jpg"/>
  <object width="100%" height="300px" data="image1.jpg"></object>
</body>

页面效果如下：

观察一下还是挺有趣的，除了iframe外，其他两个标签的图片长宽均继承了它们自身的长宽比例。这里只是为了给大家做测试，显示图片的话还是尽量使用<img>标签。

说到<embed>和<object>这两个标签，在功能上和<iframe>非常相似，但是相比较而言，<iframe>标签更加灵活。在我之前做的测试中，在不经过特殊设置的情况下，iframe可以显示MP4视频文件，而另外两个不能。实际上，html5之后视频统一由<video>标签来打开，具体操作我们在后面的内容中为大家介绍。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

因此相比较而言，<embed> <object>两个标签作用不是很大，大部分功能也被其他标签取代。

在笔者的产业实践过程中也很少用到这两个标签，这里也就作为一个扩充知识介绍给大家吧。

实际上我本人对这两个标签和<iframe>标签的具体区别以及背后的原因知道的也不多。

如果有小伙伴对<embed>和<object>的历史和特性有了解的话，请在留言区赐教！在下不胜感激！

喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！