Skip to main content

Download File Angular 8 And ASP.NET Web API 2

Web API Code :
[Route("DownloadFile")]
        [HttpGet]
        public HttpResponseMessage DownloadFile(string filePath)
        {
            HttpResponseMessage Response;
            //string RootPath = HttpContext.Current.Server.MapPath("~/Upload/");
            string FilePath = HttpContext.Current.Server.MapPath(filePath);

            if (File.Exists(FilePath) == false)
            {
                Response = Request.CreateResponse(HttpStatusCode.NotFound, "File does not exist.");
            }
            else
            {
                // Serve the file to the client
                string AttachmentFileName = null;
                string UserAgent = Request.Headers.UserAgent.ToString().ToLower();
                bool IsMicrosoftVariant = false;

                IsMicrosoftVariant = UserAgent.Contains("msie") || UserAgent.Contains("edge");
                //AttachmentFileName = IsMicrosoftVariant == true ? Uri.EscapeDataString(OriginalName) : OriginalName;
                AttachmentFileName = string.Format("\"{0}\"", AttachmentFileName);

                Response = Request.CreateResponse(HttpStatusCode.OK);
                Response.Content = new StreamContent(new FileStream(FilePath, FileMode.Open, FileAccess.Read));
                Response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
                Response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
                Response.Content.Headers.ContentDisposition.FileName = AttachmentFileName;
            }
            return Response;
        }


Angular Sevice Code:

import { HttpClient, HttpRequest, HttpEventType, HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import {saveFile, saveAs} from 'file-saver';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

@Injectable()
export class SharedService {
  constructor(private http: HttpClient) {}

  downloadFile(data: any, filename: string) {
    const blob = new Blob([data], { type: 'application/octet-stream' });
    saveAs(blob, filename);
  }

  //This method gets the details of one client.
  public getDocument(id: number, fileId: string, fileName: string) {

    this.http.get(AppSettings.DOCUMENTDOWNLOAD_ENDPOINT(id, fileId), {responseType: 'blob'})
      .subscribe((data) => this.downloadFile(data, fileName), error => console.log('Error downloading the file.'),
        () => console.info('OK'));
  }
}

Comments

Popular posts from this blog

FTP(File Transfer Protocol ) configuration and testing in Windows Server 2008 R2

First of all you have to know  what the FTP is " File Transfer Protocol ( FTP ) is a standard network protocol used to transfer files from one host or to another host over a TCP -based network". FTP Installation & Configuration: Step 1: Install the Web Server role with the IIS Management Console and FTP Server role services: Step 2: Add a new FTP Site Step 3: Setup the site with the default bindings and choose Allow SSL to avoid deploying a certificate:     Step 4: Configure user permissions and basic or anonymous permission. If your server is connected to your domain you can specify domain users, otherwise they must be local user accounts: Note: Finally you’ll have to configure your server’s firewall rules to allow access.Disregard any existing FTP firewall rules; although they should be enabled, they don’t actually allow access! Run Allow a Program Through Windows Firewall and grant access to C:\Windows\System32\svchost.exe T...

update your package-lock.json according to what you have specified in the package.json file

  The objective of the   npm update   command is to update your   package-lock.json   according to what you have specified in the   package.json   file. This is the normal behavior. If you want to update your package.json file, you can use  npm-check-updates :  npm install -g npm-check-updates . You can then use these commands: ncu  Checks for updates from the package.json file ncu -u  Update the package.json file npm update --save  Update your package-lock.json file from the package.json file