How to download the PDF in Angular?

Madhumitha G
2 min readJun 21, 2021

--

There are some ways to download the pdf file in angular

1.Downloading the file from the asset

2.Upload via API.

You can keep the file in the asset folder until the file becomes dynamic. For Example., CV, a resume is static content in the file since the user won't change often, Daily status report is a dynamic file because the user will update their status on daily basis.

Downloading the file from the asset

Copy the file and paste it into the Assets folder.

On click on the download button, call the function, and create a link for that button as below image

Create a <a> tag using document.createElement.

link.href points to file location in the asset folder.

link.download=” Madhumitha_g.pdf' is the filename you wish to download in PDF.

link.Click gets triggered and the file gets downloaded.

Upload via API

Most of the time API will return you ByteArray or base64

If it returns in ByteArray convert the ByteArray to base64 and append in HTML

In the above code ,assigning the response body to data and creating an <a> tag using document.createElement.

convert the data to blob since API is giving the response as Blob with its type.

create an Object URL for that blob and assign it to a.href

Give the filename with the extension that you want to download, trigger the click event using a.click() and remove the URL.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Madhumitha G
Madhumitha G

No responses yet

Write a response