Timbo773
Timbo773

Reputation: 183

PDF download is showing up as bytecode coming back from the server in Chrome

I have some Angular code that makes an API call to retrieve a PDF for users. When the request is made, there are no errors thrown on the front end or from the network. The network responds with the PDF except it's all in bytecode.

This once worked in Chrome and as far as I know the code hasn't changed in a good while, so I'm not sure what has happened. It's even weirder that it works fine for me locally but on my server I'm just getting the long bytecode string in the response. Any ideas? With it working correctly locally it's tough for me to troubleshoot, but I wanted to see if anyone else has had this issue (perhaps recently?)

Service:

  getPDF(): Observable<HttpResponse<Blob>> {
    let url = `${environment}/v9/Folder/${this.folderId}/view`;
    return this.http.get(url, { observe: 'response', responseType: 'blob' });
  }

Component:

  viewFolderCertificate = () => {
    this.viewService.getPDF()
      .subscribe(response => {
        saveAs(response.body, 'view.pdf');
      });
  }

This works perfectly for IE11, Edge, and Firefox. I've looked around to see if there's been any updates to Chrome that may be causing this--no luck yet. I'm not running any kind of Adblocker and other people have experienced the issue on my server so I don't think it's anything to do with my own machine.

It appears as though the headers are set properly for PDFs in the back end .net code:

        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
        response.Content.Headers.ContentLength = stream.Length;
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline")

Upvotes: 1

Views: 338

Answers (1)

Marek Puchalski
Marek Puchalski

Reputation: 3659

You probably are not setting the content type header in the response. Please look at Proper MIME media type for PDF files and set the header.

If this does not work, check if you have following headers: X-ContentType-Options: nosniff (so the browser does not try to guess the content type) and Content-Disposition: attachment; filename="your.pdf" (so the content is always downloaded as a file with the name specified).

Upvotes: 1

Related Questions