How to Create a Download PDF Link

March 31, 2015

By: Nick Peers

HTML5 allows you to force the visitor's Web browser to download files, such as PDFs, instead of opening them in the browser. Alternatively, you can embed and display your PDF files inside the page, or let the Web browser display them instead of opening an external PDF viewer.

An embedded PDF and two hyperlinks on a Web page.

credit: Image courtesy of Mozilla

Forcing the Browser to Download the PDF File

Locate the place where you want to insert the link.

credit: Image courtesy of Microsoft

Step

Open the HTML file in the of your choice. If you don't have an editor, you can use Windows Notepad text editor to edit your Web pages.

Step

Locate the place where you want to display the hyperlink in the document. The content of the Web page can be found between the and

tags.

Create the hyperlink that downloads the PDF.

credit: Image courtesy of Microsoft

Step

Type Click Here to download the PDF to create a new hyperlink that downloads the PDF instead of opening it in the Web browser.

Step

Replace "PDF_Name.pdf" with the name of the PDF if the file is in the same folder as the HTML file. If the PDF is in a different folder, use the full path to the file -- C:\Downloads\Sample.pdf, for example.

Step

The download parameter forces the Web browser to download the file instead of opening it using the browser's integrated PDF viewer. You can type a meaningful name for the PDF, replacing "New PDF Name" -- the browser uses this name when it saves the file. Renaming is useful when your PDFs are generated automatically on the server and contain long, meaningless names.

Step

Replace "Click Here to download the PDF" with your own anchor text, which is the visible, clickable part of the link.

credit: Image courtesy of Mozilla

Step

Press Ctrl-S to save the changes to the Web page and then test the new hyperlink by opening the page in a Web browser. Click the new link and the browser prompts you to save the file.

Embedding or Opening the PDF Inside the Browser

Embedding PDFs

By embedding the PDF file into the Web page, you display the contents of the file inside a container.

Embed a PDF in a Web page using Notepad.

credit: Image courtesy of Microsoft

Step

Open the Web page in Notepad or an HTML editor and type anywhere between the and tags to embed the PDF file.

Step

Replace "PDF_Name.pdf" with the name of your file or with the full path to the file if the PDF is located in a different folder than the HTML file.

Step

Replace "height_in_pixels" and "width_in_pixels" with the height and width you want the container to have.

An embedded PDF in a Web page in Firefox.

credit: Image courtesy of Mozilla

Step

Press Ctrl-S to save the changes to the Web page and then test the embedded PDF by opening the page in a Web browser.

Opening PDFs Inside the Browser

Open the PDF inside the Web browser by creating a hyperlink without the download parameter: Click Here. The Web browser opens the file using its built-in PDF viewer; it only prompts the visitor to download the file if the viewer is disabled or malfunctions.

Show Comments

Around The Home

Family

Product Reviews

One Cool Thing

How to Create a Download PDF Link

Forcing the Browser to Download the PDF File

Step

Step

Step

Step

Step

Step

Step

Embedding or Opening the PDF Inside the Browser

Embedding PDFs

Step

Step

Step

Step

Opening PDFs Inside the Browser