如何在Angular上创建下载文件服务？

Question

I create a controller in my .Net Core API in order to create a file with package nugget iTextSharp and send the pdf file to the user. When I test it with Swagger cause it's implemented in the project it's work well but it's doesn't work when I want to use the controller in my angular application.

My C# controller :

[HttpPost("[Action]")]
public IActionResult CreateLicensePDF(License license) { 
    GenerateLicenseFIleService generateLicenseFIleService = new GenerateLicenseFIleService();
    byte[] abytes = generateLicenseFIleService.Generate(license);
    string fileName = license.Customer.CustomerNumber + "-" + license.Order.OrderNumber + ".pdf";
    return File(abytes, "application/pdf", fileName);
}

The service which call the api url to execute the controller in my angular application :

generateLicensePDF(license){
    return this.http.post(`${this.config.catchApiUrl()}GenerateFile/CreateLicensePDF`,license);

}

On click on a button it execute this function to call the service

onSubmit(){
    // get a license by id and it's return license's data
    this.licenseInfoService.getLicenseById(1).subscribe(

    r => {// call the service which download the file
        this.licenseInfoService.generateLicensePDF(r).subscribe(

            r => console.log("yeah"),
            err => console.log(err))

   }

}

I try lot of thing but the error is always :

it's return an HttpErrorMessage, the status is 400 with this error message

"": ["The input was not valid.

or :

it's return an HttpErrorMessage, the status is 200 with this error message

SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad

Answer 1

How about setting responseType :

generateLicensePDF(license){
    return this.http.post(`${this.config.catchApiUrl()}GenerateFile/CreateLicensePDF`,license, { responseType: 'blob' });
}

Then you can install Angular FileSaver :

npm install file-saver --save

And then:

import { saveAs } from 'file-saver';

onSubmit(){
    // get a license by id and it's return license's data
    this.licenseInfoService.getLicenseById(1).subscribe(

    r => {// call the service which download the file
        this.licenseInfoService.generateLicensePDF(r).subscribe(
            x => {
                saveAs(x);
                console.log("yeah")
            },
            err => console.log(err))
   }
}

And that will get you a Blob result from service and with saveAs you will download it on your machine. If you want to get a response with a file you can use:

this.http.post(`${this.config.catchApiUrl()}GenerateFile/CreateLicensePDF`,license, { observe: 'response', responseType: 'blob' });

and then you can save file with:

saveAs(r.body)

I hope this helps...