在前端开发中，经常会遇到需要在页面上展示 PDF 文件的情况。通常情况下，我们可以使用 <object> 或 <embed> 标签来实现，但是这些标签有时候无法完全满足我们的需求，比如需要动态控制 PDF 文件的展示或者嵌入到一个特定的容器中。这时候，使用 <iframe> 标签来嵌入 PDF 文件可能是更好的选择。
1. 基本用法
使用 <iframe> 标签来嵌入 PDF 文件非常简单，只需要将文件的 URL 赋值给 src 属性即可：
<iframe src="path/to/file.pdf"></iframe>
这样就可以在页面上嵌入一个展示 PDF 文件的窗口了。不过，由于浏览器默认情况下并不支持直接在 <iframe> 中展示 PDF 文件，所以需要进行一些额外的设置。
2. 支持 PDF 的浏览器
在使用 <iframe> 来展示 PDF 文件之前，需要先了解哪些浏览器支持直接在 <iframe> 中展示 PDF 文件。目前，以下浏览器支持该功能：
- Google Chrome (版本 84 及以上)
- Safari (版本 11 及以上)
- Microsoft Edge (版本 18 及以上)
如果您需要兼容更多浏览器，可以考虑使用其他方法，比如使用 JavaScript 库来实现。
3. PDF.js
PDF.js 是 Mozilla 开发的一个开源 JavaScript 库，可以在浏览器中展示 PDF 文件。该库支持跨浏览器、高性能和可扩展性，并提供了许多功能，例如渲染器、文本提取和注释等。
要在 <iframe> 中使用 PDF.js，需要先引入该库，然后将 PDF 文件放置在服务器上，最后在 <iframe> 中设置 PDF 文件的 URL：
-- -------------------- ---- -------
---- -- ------ ---
------- ---------------------------------------------------
---- - ------ --- --- -- ---
------- -------------------------
---- ---------- -- ---
--------
-- -- ------ --
----- ------ - --------------------------------------
-- -- ------ - --- --
---------- - -----------------------------------
-- -- ------ -----------
------------- - ---------- -
-- -- ------ --- ------ --
----- ------------ - ---------------------
-- -- ------ --
----- -------- - -------------------------------------
-- -- --- --
---------------------- ---- ---------- --
------------------------------- -
-- ------
----- -------- - -----------------
-- -----
-------------------------------------- -
----- ------ - ---------------------------------
----- -------- - ------------------ ------ --- ---
-- -- ------ -------
------------ - ---------------
------------- - ----------------
-- -- --- --- ------ -
----- ------------- - -
-------------- ------------------------
--------- --------
--
-------------------------------------------------- -
-----------------------------------------------
---
---
---
--
---------上面的代码演示了如何使用 PDF.js 在 <iframe> 中展示 PDF 文件。首先，需要在 HTML 中引入 PDF.js 库，然后创建一个空的 <iframe> 元素。接下来，在 JavaScript 中获取该元素，并设置它的 src 属性为 PDF 文件的 URL，同时还可以设置一些查询参数，例如缩放比例和初始页面。最后，在 <iframe> 加载完成后，使用 PDF.js 加载 PDF 文件，并渲染第一页。
4. 总
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29085