Spring Boot File Download via Angular7 PART 02

Preparing the Angular Client (Angular 7)

Video guide of the angular-client process



1. Create Angular App

Use the below command to create a new angular app with name client.

1
ng new client --minimal=true --routing=false --style=css

In case if you see any vulnerabilities reported after the app was created, switch to the client directory and run the below command to let npm fix those issues.

1
npm audit fix

2. Add File Saver dependency

Add file-saver dependency to enable saving files to the file-system on the client side.

1
npm i -s file-saver

3. Create File Download Service

Use the below command to generate file download service.

1
ng g s service/file-download

4. Create File Download Component

Use the below command to generate file download component.

1
ng g c component/file-download

5. Add HttpClientModule to the application.

To be able to use the HttpClient service within your components we first need to include the HttpClientModule in the Angular application.
First we need to import HttpClientModule in the application’s root module in the file app.module.ts by adding the below import statement.

1
import { HttpClientModule } from '@angular/common/http';
6. Implement File Download Service

Update file-download.service.ts with the below implementation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FileDownloadService {

  constructor(private http:HttpClient) { }

  downloadFile(data) {
    const REQUEST_PARAMS = new HttpParams().set('fileName', data.fileName);
    const REQUEST_URL = '/server/download'
    return this.http.get(REQUEST_URL, {
      params: REQUEST_PARAMS,
      responseType: 'arraybuffer'
    });
  }
}

7. Implement File Download Component

    i. Update file-download.component.ts with the below implementation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component, OnInit } from '@angular/core';
import { FileDownloadService } from '../../service/file-download.service';
import { saveAs } from 'file-saver';

const MIME_TYPES = {
  pdf  : 'application/pdf',
  xls  : 'application/vnd.ms-excel',
  xlsx : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
};

@Component({
  selector: 'app-file-download',
  templateUrl: './file-download.component.html',
  styleUrls: ['./file-download.component.css']
})
export class FileDownloadComponent implements OnInit {

  constructor(private service:FileDownloadService) { }

  ngOnInit() {
  }

  downloadFile(fileName) {
    console.log("fileName : " + fileName);
    const extension = fileName.substr(fileName.lastIndexOf('.') + 1)
    this.service.downloadFile({'fileName': fileName})
    .subscribe(data => {
      saveAs(new Blob([data], { type: MIME_TYPES[extension] }), fileName);
    })
  }  
}

    ii. Update file-download.component.html with the below implementation.

1
2
3
4
5
6
7
8
9
<h3>Choose File </h3>

<select #selectedFile>
  <option value="">- select -</option>
  <option value="alpha.xls">alpha.xls</option>
  <option value="alpha.xlsx">alpha.xlsx</option>
</select>

<button style="margin-left: 30px;" (click)="downloadFile(selectedFile.value)">Download</button>

    iii. Update app.component.html with the below implementation.

1
2
3
4
5
6
<div style="text-align:center">
  <h1>
    File Download Demo
  </h1>
  <app-file-download></app-file-download>
</div>
8. Add Proxy Configuration to reach Spring Boot Service.

In the root directory of the angular app, create a file proxy.config.json with the below contents.

1
2
3
4
5
6
7
8
{
   "/server":{
      "target":"http://localhost:8080",
      "pathRewrite":{
         "^/server":""
      }
   }
}

The last change we need to make is to tell the Angular server to use the new proxy.
Open package.json file and update the start script as below.

1
"start": "ng serve --proxy-config proxy.config.json"

Now start the app using npm start and navigate to http://localhost:4200.
You’ll see a UI similar to the one in the below image.