使用 HTML 下载 pdf 文件

2025年3月25日 | 阅读 7 分钟

本文将介绍如何使用 HTML 下载 PDF 文件。为此，我们使用 HTML5 的 “download” 属性的 <a> 标签。我们可以通过各种示例来解释这个概念。在此之前，我们将理解一些基本术语。

HTML

HTML 代表 超文本标记语言。HTML 是使用最广泛的标记语言，我们使用各种称为标签的命令来标记网页上的内容。标签是直接嵌入到 HTML 文档文本中的指令。每个 HTML 标签都指定了浏览器在网页上显示文本时应使用的某种操作。 HTML 是构建和设计网页的标准语言。

HTML5

HTML 5 是 HTML 的最新版本。HTML5 于 2014 年 10 月 28 日成为 W3 标准。W3C 代表 万维网联盟。W3C 是万维网的主要国际标准组织。

HTML 中的 <a> 标签

这也称为锚点标签。它用于在 HTML 中创建链接或超链接。在开始的 <a> 标签和结束的 </a> 标签之间的任何内容，即文本、图像、文件，都可以是任何扩展名的部分，用户可以在浏览器中点击该链接。用户可以点击开始的 <a> 标签和结束的 </a> 标签之间的任何内容。您可以使用 “href” 属性指定要链接的页面。

下面是 <a> 标签的一般语法

语法

在上例语法中，

<a> 标签用于创建链接，

Href 指定链接将转到的文档的位置。

HTML 中的链接类型

绝对超链接：也称为外部超链接。绝对超链接使用完整的 URL，即完整的网站地址。当我们想将我们的页面链接到 Web 上的任何其他网站时，我们需要提供网页的完整网站地址。这种类型的地址称为绝对超链接。
示例
<a href ="http://www.microsoft.com" attributes-list> 链接文本 </a>
相对超链接：也称为内部超链接。相对 URL 指向网站内的文件。相对链接会搜索所有链接并更改其名称。相对链接基于服务器知道链接文档的位置这一事实。
示例
<a href ="about.html" attributes-list> 链接文本 </a>

<a> 标签的属性

下载链接

通过使用 <a> 标签的 download 属性，我们可以下载 PDF 文件、图像、Word 文件等。download 属性指定当用户单击超链接时，目标（href 属性中指定的文件）将被下载。

您可以创建一个文本链接来使您的 PDF 或 DOC、ZIP 文件可供下载。这非常简单，您只需提供可下载文件的完整 URL，如下所示

语法

在上面的语法中，

<a> 标签用于创建链接，

href 指定链接将转到的文档的位置。

Download 指定属性。

您也可以为 download 属性提供可选值。download 属性的可选值将是文件下载后的新名称。如果省略该值，则使用原始文件名。以下是为 download 属性设置可选值的语法

语法

<a href ="Document URL" attributes-list download ="optional-value" > Link Text </a>

让我们举一些例子。

示例 1

创建一个示例，使用 <a> 标签的 download 属性下载图像。

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> 
	<title> 
		Download image using <a> tag download attribute
	</title> 
<style> 
		h1 { 
			color: green;
		} 
		h5 { 
			color: green; 
		} 
		h2 { 
			color: green; 
		} 
		p {
		color: red; 
		}
</style>
</head>
<body>
<center>
<h2> Example 1 </h2>
<h1>download attribute used to download image</h1>
<h5>Click on the image to download it :</h5>
<a href="logo 2.png" download >
  <img src="logo 2.png" alt="tpointtech" width="104" height="142">
</a>
</center>
</body>
</html>

说明

在此示例中，我们使用了图像的相对路径。

在此部分，我们创建了一个可下载的图像链接，当用户单击图像时，该图像将以相同的名称下载。

输出

当我们单击图像时，图像将以 download 属性中提到的名称下载。

示例 2

Create an example to download image using <a> tag download attribute with given name.
<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> 
	<title> 
		Download image using <a> tag download attribute
	</title> 
<style> 
		h1 { 
			color: green;
		} 
		h5 { 
			color: green; 
		} 
		h2 { 
			color: green; 
		} 
		p {
		color: red; 
		}
</style>
</head>
<body>
<center>
<h2> Example 2 </h2>
<h1>download attribute used to download image </h1>
<h5>Click on the image to download it : </h5>
<a href="logo 2.png" download ="logo">
  <img src="logo 2.png" alt="tpointtech" width="104" height="142">
</a>
<h5> image download with given name in download attribute </h5>
</center>
</body>
</html>

说明

在此示例中，我们使用了图像的相对路径。

在此部分，我们创建了一个可下载的图像链接，当用户单击图像时，该图像将以 logo 名称下载。

输出

当我们单击图像时，图像将以 download 属性中给出的名称下载。

示例 3

创建一个示例，使用 <a> 标签的 download 属性下载PDF 文件。

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> 
	<title> 
		Download pdf file using <a> tag download attribute
	</title> 
<style> 
		h1 { 
			color: red;
		} 
		h5 { 
			color: green; 
		} 
		h2 { 
			color: green; 
		} 
		p {
		color: red; 
		}
		a {
		color: red; 
		}
</style>
</head>
<body>
<center>
<h2> Example 3 </h2>
<h1>download attribute used to download pdf file </h1>
<h5>Click on the below text to download pdf file :</h5>
<a href = "dosfiles.pdf" download >
 <b> download </b>
</a>
<h5> pdf file download with default name </h5>
</center>
</body>
</html>

说明

在此示例中，我们使用了 PDF 文件的相对路径。

下载

</a>

在此部分，我们创建了一个可下载的 PDF 文件链接，当用户单击 PDF 文件时，该 PDF 将以相同的名称下载。

输出

当我们单击文本时，PDF 文件将以 download 属性中指定的名称下载。

示例 4

创建一个示例，使用 <a> 标签的 download 属性下载PDF 文件，并指定名称。

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> 
	<title> 
		Download pdf file using <a> tag download attribute
	</title> 
<style> 
		h1 { 
			color: red;
		} 
		h5 { 
			color: green; 
		} 
		h2 { 
			color: green; 
		} 
		p {
		color: red; 
		}
		a {
		color: red; 
		}
</style>
</head>
<body>
<center>
<h2> Example 4 </h2>
<h1>download attribute used to download pdf file </h1>
<h5>Click on the below text to download pdf file : </h5>
<a href = "dosfiles.pdf" download = "file">
 <b> download </b>
</a>
<h5> pdf file download with given name in download attribute </h5>
</center>
</body>
</html>

说明

在此示例中，我们使用了 PDF 文件的相对路径。

下载

</a>

在此部分，我们创建了一个可下载的 PDF 文件链接，当用户单击 PDF 文件时，该 PDF 将以 download 属性中指定的名称下载。

输出

当我们单击文本时，PDF 文件将以 download 属性中指定的名称下载。

示例 5

创建一个示例，使用 <a> 标签的 download 属性下载Word 文件。

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> 
	<title> 
		Download word file using <a> tag download attribute
	</title> 
<style> 
		h1 { 
			color: red;
		} 
		h5 { 
			color: green; 
		} 
		h2 { 
			color: green; 
		} 
		p {
		color: red; 
		}
		a {
		color: red; 
		}
</style>
</head>
<body>
<center>
<h2> Example 5 </h2>
<h1>download attribute used to download word file </h1>
<h5>Click on the below text to download word file :</h5>
<a href = "example.docx" >
 <b> download </b>
</a>
<h5> word file download with default name </h5>
</center>
</body>
</html>

说明

在此示例中，我们使用了 Word 文件的相对路径。

下载

</a>

在此部分，我们创建了一个可下载的Word 文件链接，当用户单击 Word 文件时，该文件将以相同的名称下载。

输出

当我们单击文本时，Word 文件将以默认名称下载。

示例 6

创建一个示例，使用 <a> 标签的 download 属性下载 Word 文件，并指定名称。

<! DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head> 
	<title> 
		Download word file using <a> tag download attribute
	</title> 
<style> 
		h1 { 
			color: red;
		} 
		h5 { 
			color: green; 
		} 
		h2 { 
			color: green; 
		} 
		p {
		color: red; 
		}
		a {
		color: red; 
		}
</style>
</head>
<body>
<center>
<h2> Example 6 </h2>
<h1>download attribute used to download word file </h1>
<h5>Click on the below text to download word file : </h5>
<a href = "example.docx" download = "file">
 <b> download </b>
</a>
<h5> word file download with name given in download attribute </h5>
</center>
</body>
</html>

说明

在此示例中，我们使用了 Word 文件的相对路径。

下载

</a>

在此部分，我们创建了一个可下载的Word 文件链接，当用户单击 Word 文件时，该 Word 文件将以 download 属性中指定的名称下载。

输出

当我们单击文本时，Word 文件将以 download 属性中给出的名称下载。

下一个主题HTML 中的密码隐藏

使用 HTML 下载 pdf 文件

HTML

HTML5

HTML 中的 <a> 标签

语法

<a> 标签的属性

下载链接

语法

语法

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

使用 HTML 下载 pdf 文件

HTML

HTML5

HTML 中的 <a> 标签

语法

<a> 标签的属性

下载链接

语法

语法

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

相关帖子

HTML 日历

HTML class 属性

HTML 复选框标签

HTML ID 属性

如何制作 HTML 下拉菜单

HTML 仅输入数字

HTML 和 CSS 中的自动图片滑块

HTML 字体颜色

HTML 注入

HTML Localhost Index

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器