将 PDF 嵌入到 HTML 的推荐方式?


将 PDF 嵌入到 HTML 中是一项简单的任务,并且有多种方法。让我们一个一个地来看一下。

  • 使用 iframe 将 PDF 嵌入到 HTML 中。
  • 使用 embed 标签将 PDF 嵌入到 HTML 中。
  • 使用 object 标签将 PDF 嵌入到 HTML 中。

使用 iframe 将 PDF 嵌入到 HTML 中

设置 iframe 标签的 src 属性,并添加要嵌入的 PDF 链接 −

<iframe src="https://tutorialspoint.com/python3/python3_tutorial.pdf" width="700" height="500">
</iframe>

示例

现在让我们看一个使用 <iframe>− 的 ember PDF 的示例

Open Compiler
<!DOCTYPE html> <html> <head> <title>Embed PDF</title> </head> <body> <center> <h1>Python by Tutorialspoint</h1> <p>Below is a preview of the Python Tutorial:</p> <iframe src="https://tutorialspoint.com/python3/python3_tutorial.pdf" width="700" height="500"> </iframe> </center> </body> </html>

输出

使用 embed 标签将 PDF 嵌入到 HTML 中

我们也可以使用 <embed> 标签嵌入 PDF −

<embed src="https://tutorialspoint.com/java/java_tutorial.pdf" width="700" height="500">

示例

现在让我们看一个使用 embed 标签嵌入 PDF 的示例 −

Open Compiler
<!DOCTYPE html> <html> <head> <title>Embed PDF</title> </head> <body> <center> <h1>Java by Tutorialspoint</h1> <p>Below is a preview of the Java Tutorial:</p> <embed src="https://tutorialspoint.com/java/java_tutorial.pdf" width="700" height="500"> </center> </body> </html>

输出

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 object 标签将 PDF 嵌入到 HTML 中

我们可以使用 <object> 标签嵌入 PDF。object data 的 data 属性是你需要将要嵌入的 PDF 文件的链接放置的地方 −

<object data="https://tutorialspoint.com/android/android_tutorial.pdf" width="700" height="500">

示例

现在让我们看一个使用 object 标签嵌入 PDF 的示例 −

Open Compiler
<!DOCTYPE html> <html> <head> <title>Embed PDF</title> </head> <body> <center> <h1>Android by Tutorialspoint</h1> <p>Below is a preview of the Android Tutorial:</p> <object data="https://tutorialspoint.com/android/android_tutorial.pdf" width="700" height="500"> </center> </body> </html>

输出

更新于: 2022 年 12 月 6 日

2K+ 浏览

助力您的 职业

课程结业时获得认证

开始使用
广告