How to download file from bytes by using web api and angular

Viewed 1038

I have used below code to download file. I have successfully assigned bytearray in web api.

    byte[] bytes = llResponse.FileContent;
    response.Content = new ByteArrayContent(bytes)

But finally i am getting below response my browser console

SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:36098:51) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9462:31) at Object.onInvokeTask (http://localhost:4200/vendor.js:99246:33) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:9461:60) at Zone.runTask (http://localhost:4200/polyfills.js:9239:47) at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:9536:34) at invokeTask (http://localhost:4200/polyfills.js:10674:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:10711:21)
message: "Unexpected token � in JSON at position 0

Complete code i have used is as below

angular

 this.appService.DownloadFile(this.filter).subscribe((data) => {  
                
                
                importedSaveAs(data, this.filter.FileName)  

            })



public DownloadFile(obj:liveLinkFilter): Observable<any> {
        var url = this.baseApiUrl + 'RadioLink/DownloadFile';
        var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
        return this.httpService.post(url, obj, { headers: reqHeader, withCredentials: true });
    }

Web Api code

[HttpPost]
        [Route("DownloadFile")]
        public HttpResponseMessage DownloadFile(LiveLinkDocumentBO obj)
        {
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            LLAccessResponse llResponse;

            //GetFileType(lvlnkBo.FileName);
            LLService llservice = new LLService();
            
            llResponse = llservice.FetchDocument(Convert.ToInt32(obj.FileId), obj.LLUserName, obj.FileName);
            //Read the File into a Byte Array.  
            byte[] bytes = llResponse.FileContent;
            response.Content = new ByteArrayContent(bytes);
            //Set the Response Content Length.  
            response.Content.Headers.ContentLength = bytes.LongLength;
            //Set the Content Disposition Header Value and FileName.  
            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            response.Content.Headers.ContentDisposition.FileName = obj.FileName;
            //Set the File Content Type.  
            response.Content.Headers.ContentType = new MediaTypeHeaderValue(MimeMapping.GetMimeMapping(obj.FileName));
            return response;
        }
1 Answers

Angular's HttpClient assumes that the respose is JSON by default. If the response from your API is a text string, set the responseType property of the HTTP request options (the third argument to httpService.post) to "text". If the response is binary data, set the response type to "arraybuffer" or "blob".

Related