Angular - Force Download File Solution On Web Application

 Angular - Force Download File Solution On Web Application

When working on file download functions, you will often come across the requirement to click on the link, the button is to download it instead of turning it on or overloading the current web page. This problem of jumping to another tab or loading over the web is very annoying for users.


The problem posed:

However, when implementing the file download function, if handling at the native mobile or desktop application layer, this is very easy because it can interfere deeply with the download flow and UI, but on the browser, it will bring many compatibility problems. because it's only possible through certain web APIs (due to security limitations). In addition, the following problems arise:


Ex: Chrome, Edge, IE11, Firefox, mobile web (Android OS) browsers all have different behaviors, one opens a new tab, another reloads the whole page.

New feature html5 Download attribute of <a> tag does not support image download and always opens a new tab or loads over the current page

IE11, Edge do not support html5 Download attribute of <a> tag

Can't save by arbitrary file name, in case link filename hash will be bad experience for user

What is the solution?

Below I share the solution that solved all the above problems including:


Support all current popular browsers including mobile

force download save by file name, not by url link

returns download progress in %

Comments

Post a Comment

Popular posts from this blog

5 Minutes Learn About Client - Server Model

Hello, Today in this article I talk about a little bit of web programming for those who are pursuing and planning to learn about the Web or who like to learn and dabble. Talking about the Web, you probably already know and use them every day. But to understand how a website works, most people are curious and wondering. For a programmer, it is necessary to know the client - server model. And today, I would like to talk about Client - Server model. Introduce The client-server model is a model that helps computers communicate and transmit data to each other. Referring to Client and Server, these are two quite common keywords that everyone knows. And I also reiterate the summary of client - server Client and server are essentially two computers that communicate and transmit data to each other. Computers act as clients - Client: As clients, they will not provide resources to other computers, but only use resources provided from the server. A client in one model can be a server for another, ...
Read more