In this article we are going to present how to download files like PDF, Excel and CSV using Spring Boot on the backend and Angular on the frontend. Files will be downloaded from the filesystem and served using REST controller.
Let's start with the architecture of the application:
There are two main layers: the frontend and backend side. The frontend side is used to present a user interface with links to files. The backend will be responsible for serving files using REST endpoints handled by the Spring Boot controller.
The backend side is handled by the Spring Boot application, which will serve files that could be directly downloaded from the browser.
3.1. The structure of the Spring Boot application
The structure contains the following classes:
Application - which is a main Spring Boot class used for starting web application,
FileController - Spring Rest Controller class used for handling HTTP requests,
FileService - the Service class responsible for downloading files,
application.properties - the configuration file.
3.2. Spring Controller class
The Spring controller class will handle the HTTP GET requests:
This class is annotated with @RestController stereotype that marks this class as REST controller. The next annotation @RequestMapping was used to provide the base URL for endpoints used in this controller.
In order to download files we need to use a special HTTP header: Content-Disposition - this header indicating that the file should be downloaded (the 'Save as' dialog should be opened on the browser).
3.3. Service class
The service class was introduced to separate logic that is responsible for downloading files with REST controller:
For the sake of simplicity, this service just returns files or throws an exception when the file will not be found.
3.4. Configuration file
The application.properties contains the path to files that we will want to download on the frontend side:
4.1. Generate Angular Project
The Angular project was generated using CLI and ng command:
To create an empty Angular project we used:
To create a file component:
To create a service:
4.2. The structure of the Angular application
The generated project has the following structure:
4.3. Angular files component
Files component was created to present a list of files that we want to download:
The HTML document related to this FilesComponent has the following structure:
4.4. Angular download service
The DownloadService is used Angular HttpClient to communicate with the Spring Boot application server. This component is responsible for downloading files:
The application shows the following functionality:
As you can see files are downloaded right away, without prompting about opening them. This behavior was achieved because we used a special HTTP header Content-Disposition with the attachment value. If you want to preview PDF File instead of downloading you should also use Content-Disposition header but with inline value.
In this tutorial, we show a simple example of how to download files using Spring Boot and Angular.