In this tutorial, we'll explore the process of fetching a PDF document through HTML. We will achieve this by leveraging the "download" attribute of an HTML5 <a> element. To illustrate this idea, we will provide multiple instances for better comprehension. But first, let's delve into some fundamental terminology.
Hypertext Markup Language, commonly known as HTML, serves as the primary markup language utilized for structuring content on web pages. Tags, which are commands integrated within HTML documents, play a crucial role in marking up content. Each HTML tag provides instructions to the browser on how to present the text on the web page. HTML serves as the foundational language for creating and styling web pages.
HTML5:
HTML 5 represents the most recent iteration of the HTML language. It was officially adopted as a W3 standard on October 28, 2014. The abbreviation W3C stands for the World Wide Web Consortium, which serves as the primary global standard-setting body for the World Wide Web.
<a> tag in HTML
This is also called anchor tag . It is used to create links or hyperlinks in html. Anything, i.e., the text, the image, the file, can be of any extension between the opening <a> tag and the closing </a> tag becomes part of the link that the user can click in a browser. Users can click on anything between the opening <a> tag and the closing </a> tag. You can specify which page you want to link by using the "href" attribute.
Below is the standard syntax of the <a> tag:
Syntax:
<a href ="Document URL" attributes-list> Link Text </a>
In above syntax,
<a> tag is used for creating link,
The href attribute defines the URL of the destination where the hyperlink will navigate to.
Types of links in html:
- Absolute hyperlink : it is also called an external hyperlink. The absolute hyperlink uses a complete URL, i.e., the full website address. When we want to link our page to any other website on the web, we need to provide the full website address of the webpage. Such a type of address is called an absolute hyperlink. Example: <a href ="http://www.microsoft.com" attributes-list> Link Text </a>
- Relative hyperlink : It is also called an internal hyperlink. A relative URL points to a file within a web site. Relative links make pages, searching down all links and changing their names. A relative link is based on the fact that the server knows the location of the linked document. Example: <a href ="about.html" attributes-list> Link Text </a>
Attribute of <a> tag
Download Links:
By utilizing the download attribute in HTML, we can enable users to download various types of files such as PDFs, images, Word documents, and more. The download attribute indicates that the linked file (specified in the href attribute) should be downloaded when the hyperlink is clicked.
To enable the download of PDF, DOC, or ZIP files, you can easily generate a text hyperlink. Simply provide the full URL of the file you want to be downloadable, in the following format:
Syntax:
<a href ="Document URL" attributes-list download > Link Text </a>
In the above syntax,
<a> tag is used for creating a link,
The href attribute defines the URL of the destination where the hyperlink will navigate to.
Download specifies the attribute.
An additional option is to specify a value for the download attribute. This value, when provided, will serve as the new filename for the downloaded file. In cases where this value is not supplied, the original filename will be retained. Below outlines the syntax for assigning an optional value to the download attribute:
Syntax:
<a href ="Document URL" attributes-list download ="optional-value" > Link Text </a>
Let us take some examples.
Example 1:
Demonstrate the process of downloading an image by utilizing the download attribute within an anchor tag in HTML.
<! 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="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="Example" width="104" height="142">
</a>
</center>
</body>
</html>
Explanation:
In this instance, we utilized the image's relative path.
In this section, we will generate a downloadable hyperlink for the image. Upon clicking on the image, the user will initiate the download process, and the image will be saved with its original filename.
Output:
Upon clicking the image, the file will be downloaded with the exact name as specified.
Example 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="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="Example" width="104" height="142">
</a>
<h5> image download with given name in download attribute </h5>
</center>
</body>
</html>
Explanation:
In this instance, we have employed the relative image path.
In this section, we will generate a downloadable link for an image. Upon clicking the image, it will initiate the download process with the filename "logo".
Output:
Upon clicking the image, the file will commence downloading with the filename specified within the download attribute.
Example 3:
Demonstrate how to create a sample for downloading a PDF file utilizing the HTML <a> tag with the download attribute.
<! 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>
Explanation:
In this instance, we have employed the relative path of the PDF document.
<b> download </b>
In this section, we have generated a downloadable hyperlink for the PDF document. Upon clicking the link, the PDF file will be downloaded with its original filename.
Output:
Upon clicking the text, the PDF file will initiate a download with the specified name provided in the download attribute.
Example 4:
Provide an illustration demonstrating how to initiate the download of a PDF file using the HTML <a> tag along with a specified filename.
<! 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>
Explanation:
In this instance, we have utilized the relative path of the PDF document.
<b> download </b>
In this section, we have established a downloadable hyperlink for a PDF document. Upon clicking the link, the PDF file will be downloaded with the name specified in the download attribute.
Output:
Upon clicking the text, the PDF file will be automatically downloaded with the name specified in the download attribute.
Example 5:
Demonstrate how to initiate the download of a Word file utilizing the HTML tag download attribute with the <a> tag.
<! 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>
Explanation:
In this instance, we have utilized the relative path of the document file.
<b> download </b>
In this section, we have generated a link for downloading a Word document. Upon clicking the link, the document will be downloaded retaining its original filename.
Output:
By clicking on the text, a Word file will be downloaded with its default name.
Example 6:
Demonstrate how to download a Word file by utilizing the HTML <a> tag with the specified filename attribute.
<! 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>
Explanation:
In this instance, we utilized the relative path for the word document.
<b> download </b>
In this section, we are going to generate a downloadable hyperlink for a Word document. Once the hyperlink is clicked, the Word document will be downloaded with the specified name indicated in the download attribute.
Output:
Upon clicking the text, a Word file will be downloaded with the specified name provided in the download attribute.