TIL: Add the "download" attribute on the link tag when calling the download endpoint

Search for a command to run...

Very informative Abul . I also had the same issue in my audio2audio conversion app . Thanks a lot .
Series on sharing simple insights I've learned. While some may seem basic, there are always others who, like me, may not be aware. Join me in discovering and sharing small, valuable lessons.
Sequelize offers support for read replication, enabling the use of multiple servers for executing SELECT queries. In this configuration, you designate one or more servers as read replicas, while appointing one server as the primary writer. The primar...
Motivation Recently, I tried to learn some low-level system programming stuff. I am a Mac user, and I thought that everything that works on Linux should also work on Mac. After all, Mac is a Unix-based system 😊. I guess we all heard this. Oh boy! I ...

Problem Statement While working on a Nestjs project, I encountered a weird problem related to the database column. I was trying to insert a record into a MySQL table using TypeORM. The error I was experiencing stated that a specific column “cannot be...

Recently, I was exploring design patterns courses on my LinkedIn Learning subscription. I came across a course, Node.js: Design Patterns by Alex Banks. It is a wonderful, easy-to-understand course. I started with the Builder Pattern, and the explanat...

Suppose you are working on a table in a LiveView project. This table has limited static data of not more than one page (you can avoid questions about pagination in the comment section 😊). From a user's point of view, it becomes hard to look into the...

Recently, while working on one of my personal Elixir projects. I came across a scenario where I needed to make some changes to the database schema.The changes mainly revolve around adding and removing indexes due to changes in the business requiremen...

Downloading pdf or any other documents is very common in day-to-day web applications. We often see buttons like Download, Generate Invoice, etc buttons in web applications that makes calls to a GET endpoint which does some computations and downloads pdf or any other document file.
While working on one of the projects I added an endpoint i.e. /generate-invoice(GET) in a Phoenix application. Its job was to do some tabular computation and generate a PDF. I added a link tag to call the endpoint something like this
<%= link "Invoice", to: "/generate-invoice", class: "button" %>
As expected it was working fine but later I noticed a weird behavior. After clicking the Invoice button when I tried to click other buttons or any action that involved javascript, it wasn't working. I thought there was some bug with my endpoint or other code I tried to fix it but things weren't working for me.
When we try to access a GET endpoint that downloads, the browser navigates away from the current page. It doesn‘t know the target will download something, and will therefore shut down the javascript of the current page. Till then I wasn't aware of the download attribute on the link tag. Adding the download attribute on the above link tag helped me in fixing the problem.
<%= link "Invoice", to: "/generate-invoice", class: "button", download: 'invoice.pdf` %>
I hope you like this small TIL blog. If you have any questions please comment below. Thanks for reading 😊.