Download Pdf File Using HTML - Javatpoint

Trang chủ » Html And Css Pdf File Download » Download Pdf File Using HTML - Javatpoint

Có thể bạn quan tâm

next → ← prevDownload pdf file using HTML

In this article, we will learn how to download the pdf file using HTML. For this we are using a HTML5 <a> tag "download" property. We can explain this concept with various examples. Before that we will understand some basic terms.

HTML

HTML stands for Hypertext Markup language.HTML is the most widely used markup language, and to markup the contents on the web page, we use various commands called tags. Tags are instructions that are embedded directly into the text of an HTML document. Each HTML tag specifies some action that the browser should use in displaying the text on the web page. HTML is the standard language for building and designing web pages.

HTML5:

HTML 5 is the latest version of HTML. HTML5 became a W3 standard on October 28, 2014. The W3C stands for World Wide Web Consortium. The W3C is the main international standard organization 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.

The general syntax of <a> tag is given below:

Syntax:

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

In above syntax,

<a> tag is used for creating link,

Href specifies the location of the document, where the link will go.

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:

With the use of the <a> tag download attribute, we can download pdf files, images, word files, etc. The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.

You can create a text link to make your PDF or DOC, or ZIP files downloadable. This is very simple, and you just need to give the complete URL of the downloadable file as follows:

Syntax:

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

In the above syntax,

<a> tag is used for creating a link,

href specifies the location of the document, where the link will go.

Download specifies the attribute.

You can also give the optional value to the download attribute. The optional value of the download attribute will be the new name of the file after it is downloaded. If the value is omitted, the original filename is used. Following are the syntax to given 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:

Create an example to download an image using the <a> tag download attribute.

<! 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="javaTpoint" width="104" height="142"> </a> </center> </body> </html>

Explanation:

In this example, we have used the relative path of the image.

<a href="logo 2.png" download >

In this part we create a downloadable link of the image and when user click on the image the image will be downloaded with same name.

Output:

Download pdf file using HTML

When we click on the image, the image will be download with name same as mentioned.

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="logo 2.png" alt="javaTpoint" width="104" height="142"> </a> <h5> image download with given name in download attribute </h5> </center> </body> </html>

Explanation:

In this example we have used the relative path of the image.

<a href="logo 2.png" download ="logo">

In this part we have create a downloadable link of the image and when we click on the image the image will be download with name logo.

Output:

Download pdf file using HTML

When we click on the image, the image will be downloaded with name given in download attribute.

Example 3:

Create an example to download pdf file using <a> tag 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 example we have used the relative path of the pdf file.

<a href = "dosfiles.pdf" download >

<b> download </b>

</a>

In this part we have created a downloadable link of the pdf file and when we click on the pdf file the pdf will be downloaded with same name.

Output:

Download pdf file using HTML

When we click on the text, the pdf file will be downloaded with name given in download attribute.

Example 4:

Create an example to download pdf file using <a> tag download attribute with given name.

<! 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 example we have used the relative path of the pdf file.

<a href = "dosfiles.pdf" download = "file">

<b> download </b>

</a>

In this part we have created a downloadable link of the pdf file and when we click on the pdf file the pdf will be downloaded with name mentioned in download attribute.

Output:

Download pdf file using HTML

When we click on the text, the pdf file will be downloaded with name given in download attribute.

Example 5:

Create an example to download word file using <a> tag download 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 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 example we have used the relative path of the word file.

<a href = "example.docx" download >

<b> download </b>

</a>

In this part we have created a downloadable link of the word file and when we click on the word file the file will be downloaded with same name.

Output:

Download pdf file using HTML

When we click on the text, the word file will be download with the default name.

Example 6:

Create an example to download word file using <a> tag download attribute with given name.

<! 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 example we have used the relative path of the word file.

<a href = "example.docx" download ="file" >

<b> download </b>

</a>

In this part we have create a downloadable link of the word file and when we click on the word file the word file will be downloaded with name mentioned in download attribute.

Output:

Download pdf file using HTML

When we click on the text, the word file will be download with name given in download attribute.

Next TopicPassword hide in HTML← prev next →

Từ khóa » Html And Css Pdf File Download