I have web API that provides stores files as a stream of bytes. The response is already fetched and saved in the state but now I want to download the file from my react application onClick of a button. I am doing it as follow:

downloadContract( binaryData ) {
        const file = new Blob([binaryData], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
      }

The stream is being fetched correctly after debugging but downloading the file produces an error: Error loading PDF document.

Update:

New endpoint calling using this source:

  callLoadContract: {
    remote( state, id, contractId ) {
      const url = `${base}/vendor/${id}/${contractId }`;
      return $http.instance.api.get( url, id, contractId);
    },
    success: Actions.contractLoaded,
    error: Actions.fail
  }

Handling the response:

  loadContract({id, contractId}) {
    this.getInstance().callLoadContract( id, contractId );
  }

  contractLoaded( response ) {
    if (response && response.data) {
      console.log(response);
      const file = new Blob([response.data], { type: 'application/pdf' });
      const fileURL = URL.createObjectURL(file);
      window.open(fileURL);
    }
  }

Same error.

I have web API that provides stores files as a stream of bytes. The response is already fetched and saved in the state but now I want to download the file from my react application onClick of a button. I am doing it as follow:

downloadContract( binaryData ) {
        const file = new Blob([binaryData], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
      }

The stream is being fetched correctly after debugging but downloading the file produces an error: Error loading PDF document.

Update:

New endpoint calling using this source:

  callLoadContract: {
    remote( state, id, contractId ) {
      const url = `${base}/vendor/${id}/${contractId }`;
      return $http.instance.api.get( url, id, contractId);
    },
    success: Actions.contractLoaded,
    error: Actions.fail
  }

Handling the response:

  loadContract({id, contractId}) {
    this.getInstance().callLoadContract( id, contractId );
  }

  contractLoaded( response ) {
    if (response && response.data) {
      console.log(response);
      const file = new Blob([response.data], { type: 'application/pdf' });
      const fileURL = URL.createObjectURL(file);
      window.open(fileURL);
    }
  }

Same error.

• javascript
• reactjs
• pdf
• reactjs-flux

• Which response type is receiving your JS code, arraybuffer or blob ? – Carlos Delgado Commented Aug 14, 2017 at 11:07
• 1 Why don't you just serve it from the backend /api/download?fileId=XXXX ? – Ivan Drinchev Commented Aug 14, 2017 at 11:09
• The JSON object I am fetching has several documents. They are in blob form I am fetching them all in one GET and then the user should choose which one to view. @CarlosDelgado – user1912404 Commented Aug 14, 2017 at 11:13
• @drinchev multiple files are in the same entity – user1912404 Commented Aug 14, 2017 at 11:13
• @user1912404, what you are saying is conceptually wrong, a blob inside a JSON string :v ? Could you explain a little bit more about your problem and if is possible server side code? – Carlos Delgado Commented Aug 14, 2017 at 11:15

2 Answers 2

Maybe your problem is nothing related to the way to process the PDF in the client side as your code works pretty well:

import React from 'react';

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    downloadContract() {
        var oReq = new XMLHttpRequest();

        var URLToPDF = "https://mozilla.github.io/pdf.js/web/pressed.tracemonkey-pldi-09.pdf";

        oReq.open("GET", URLToPDF, true);

        oReq.responseType = "blob";

        oReq.onload = function() {
            // Once the file is downloaded, open a new window with the PDF
            // Remember to allow the POP-UPS in your browser
            const file = new Blob([oReq.response], { type: 'application/pdf' });

            const fileURL = URL.createObjectURL(file);

            window.open(fileURL, "_blank");
        };

        oReq.send();
    }

    render() {
        return (
            <div>
                <input type="button" onClick={this.downloadContract} value="Download PDF File"/>
            </div>
        );
    }
}

As expected, the PDF will be downloaded and shown in a new Window of the browser when the user clicks on Download.

However, the easiest approach is the mentioned by @drinchev, just server it in a URL and that's it.

Here is my solution for downloading the file but not route to new page:

try {
            let httpClient = new XMLHttpRequest();
            let pdfLink = "http://localhost/";
            httpClient.open('get', pdfLink, true);
            httpClient.responseType = "blob";
            httpClient.onload = function() {
                const file = new Blob([httpClient.response], { type: 'application/pdf' });
                const fileURL = URL.createObjectURL(file);
                const link = document.createElement("a");
                link.href = fileURL;
                link.download = "fileName.pdf";
                link.click();
                // document.body.removeChild(link);
                URL.revokeObjectURL(fileURL);
            };
            httpClient.send();
        } catch (e) {
            console.log(e);
        }