Download file using Angular and Spring Boot

Introduction

In this post I will show you how to download file using Angular 7/8/10 and Spring Boot. There are situations when you need to download file from server or you need to generate report from database and download it. This example may help you in such situation.

I will build the Spring Boot application using both maven and gradle. Here I will fetch records from database and download in a JSON format. As a server side technology we will use Spring Boot and in client side we will use Angular 7/8/10.

Related Posts:

Prerequisites

Eclipse 2020-06, Java at least 1.8, Gradle 6.5.1, Maven 3.6.3, Spring Boot 2.3.2, H2 Database 1.4.200, JAXB-API if you are using JDK 9 or above

Download file from server using Angular

Project Setup

Create gradle based project in Eclipse and the name of the project is spring-file-download.

build.gradle

Update the default generated content in build script. You need to include the required dependencies for Spring Boot, JPA and H2 in-memory database. We are using in-memory database to do a quick PoC. You can use any database as per your project requirements.

buildscript {
	ext {
		springBootVersion = '2.3.2.RELEASE'
	}
	
    repositories {
    	mavenCentral()
    }
    
    dependencies {
    	classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

plugins {
    id 'java-library'
    id 'org.springframework.boot' version "${springBootVersion}"
}

sourceCompatibility = 12
targetCompatibility = 12

repositories {
    mavenCentral()
}

dependencies {
	implementation "org.springframework.boot:spring-boot-starter-web:${springBootVersion}"
	implementation "org.springframework.boot:spring-boot-starter-data-jpa:${springBootVersion}"
	runtime("com.h2database:h2:1.4.200")
	
	//required for jdk 9 or above
	runtimeOnly('javax.xml.bind:jaxb-api:2.4.0-b180830.0359')
}

pom.xml

If you are using maven based build tool for your application then you can use below pom.xml.

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.roytuts</groupId>
	<artifactId>spring-file-download</artifactId>
	<version>0.0.1-SNAPSHOT</version>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.3.2.RELEASE</version>
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-web</artifactId>
		</dependency>
		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		
		<dependency>
			<groupId>com.h2database</groupId>
			<artifactId>h2</artifactId>
			<version>1.4.200</version>
			<scope>runtime</scope>
		</dependency>
		
		//required only if jdk 9 or higher version is used
		<dependency>
			<groupId>javax.xml.bind</groupId>
			<artifactId>jaxb-api</artifactId>
			<version>2.4.0-b180830.0359</version>
			<scope>runtime</scope>
		</dependency>
	</dependencies>

    <build>
        <plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.8.1</version>
				<configuration>
					<source>at least 8</source>
					<target>at least 8</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Application Properties File

Create a property file called application.yml under classpath directory src/main/resources with the below content to enable h2 console and log the SQL statement used for database operations in pretty format in the console.

spring:
   jpa:
      show-sql: true
   h2:
      console:
         enabled: true

JPA Entity Class

We need an entity class to map our Java attribute to database table’s column.

We will not create any SQL script for creating table in h2 database but Spring Boot will automatically create the table for below entity class.

If we do not specify the column name for the corresponding Java attribute or field then the same attribute name will be used to create column in the database table.

You don’t need to define any datasource when you are using in-memory embedded database h2.

package com.roytuts.spring.file.download.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Employee {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Integer id;

	private String name;

	@Column(name = "email_address")
	private String email;

	public Employee() {
	}

	public Employee(Integer id, String name, String email) {
		this.id = id;
		this.name = name;
		this.email = email;
	}

	// getters and setters

}

Sample Data into Table

Spring Boot will create table from entity class but we need to insert some data into the table.

So we will create a SQL script called data.sql under classpath directory src/main/resources as shown below:

insert into employee(name,email_address)
values('Soumitra','[email protected]');
insert into employee(name,email_address)
values('Liton','[email protected]');
insert into employee(name,email_address)
values('Suman','[email protected]');
insert into employee(name,email_address)
values('Debabrata','[email protected]');

Spring JPA Repository

Spring has excellent API called Spring Data JPA Repository that gives us many benefits out of the box. You just need to write methods by extending JpaRepository interface for performing basic CRUD operations. Then Spring will generate appropriate queries for your methods.

package com.roytuts.spring.file.download.repository;

import org.springframework.data.jpa.repository.JpaRepository;

import com.roytuts.spring.file.download.entity.Employee;

public interface EmployeeRepository extends JpaRepository<Employee, Integer> {

}

Create VO Class

It’s a good idea to create DTO or VO class as a response object rather than entity class.

package com.roytuts.spring.file.download.vo;

public class EmployeeVo {

	private Integer id;
	private String name;
	private String email;

        //getters and setters

}

Spring Service Class

Service class is always used to process your business for the application.

package com.roytuts.spring.file.download.service;

import java.util.List;
import java.util.stream.Collectors;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.roytuts.spring.file.download.entity.Employee;
import com.roytuts.spring.file.download.repository.EmployeeRepository;
import com.roytuts.spring.file.download.vo.EmployeeVo;

@Service
public class EmployeeService {

	@Autowired
	private EmployeeRepository employeeRepository;

	public List<EmployeeVo> getEmployeeList() {
		List<Employee> list = employeeRepository.findAll();
		return list.stream().map(emp -> {
			EmployeeVo vo = new EmployeeVo();
			vo.setId(emp.getId());
			vo.setName(emp.getName());
			vo.setEmail(emp.getEmail());
			return vo;
		}).collect(Collectors.toList());
	}

}

Spring REST Controller

The Spring REST Controller class is responsible for handling request/response for the end users or clients.

Here in the below Spring REST controller class, we fetch the data from database and convert into JSON data to send to the client as byte array.

We allow request and response for the origin http://localhost:4200 using @CrossOrigin(origins = "http://localhost:4200"). If you do not allow cross-origin request/response for the mentioned URL then you won’t be able to download file. You can also put * to allow all origins.

package com.roytuts.spring.file.download.rest.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.roytuts.spring.file.download.service.EmployeeService;
import com.roytuts.spring.file.download.vo.EmployeeVo;

@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class EmployeeRestController {

	@Autowired
	private EmployeeService employeeService;

	@GetMapping("/employees/download")
	public ResponseEntity<byte[]> downloadFile() throws Exception {
		List<EmployeeVo> employees = employeeService.getEmployeeList();
		ObjectMapper objectMapper = new ObjectMapper();
		String json = objectMapper.writeValueAsString(employees);
		byte[] isr = json.getBytes();
		String fileName = "employees.json";
		HttpHeaders respHeaders = new HttpHeaders();
		respHeaders.setContentLength(isr.length);
		respHeaders.setContentType(new MediaType("text", "json"));
		respHeaders.setCacheControl("must-revalidate, post-check=0, pre-check=0");
		respHeaders.set(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);
		return new ResponseEntity<byte[]>(isr, respHeaders, HttpStatus.OK);
	}

}

Create Main Class

Create below main class to deploy the application into embedded Tomcat server.

We need to let Spring container know where are our entity class and repository interface. You can also use a separate configuration class to enable such things.

package com.roytuts.spring.file.download;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

@EntityScan("com.roytuts.spring.file.download.entity")
@EnableJpaRepositories("com.roytuts.spring.file.download.repository")
@SpringBootApplication
public class SpringRestFileDownload {
	public static void main(String[] args) {
		SpringApplication.run(SpringRestFileDownload.class, args);
	}
}

Testing the Application

Run the main class to deploy the application into Tomcat server.

If you hit the URL http://localhost:8080/employee/download in the browser then you will get the file for save as option. Even you can test the same using Postman or any other REST client.

Also run the Angular application to open in browser.

Once your application opens at URL http://localhost:4200 in the browser and the page may look similar to the below image:

download file using angular and spring boot

When you click on link or button for downloading file you will see below page with file save option:

download file using angular and spring boot

Source Code

source code

Thanks for reading.

Related posts

Leave a Comment