I am receiving a data buffer from an node/express endpoint on my client side and I want to convert the buffer into a file.

The file may be a pdf, text document, or image. The only information the endpoint tells me is that it's sending an octet stream.

How do I go about doing this?

This is the code I have so far on my client side

const xhr = new XMLHttpRequest();
xhr.open("POST", "MY_URL", true);
xhr.responseType = "arraybuffer";

// I need to send some data for the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

// send request
xhr.send(`identifier=${myIdentifier}`);

xhr.onload = function (xEvent)
{
    const arrayBuffer = xhr.response;
    if (arrayBuffer)
    {
        const byteArray = new Uint8Array(arrayBuffer);

        const url = window.URL.createObjectURL(new Blob([byteArray]));

        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "file.pdf"); //or any other extension
        document.body.appendChild(link);
        link.click();
    }
};

I am receiving a data buffer from an node/express endpoint on my client side and I want to convert the buffer into a file.

The file may be a pdf, text document, or image. The only information the endpoint tells me is that it's sending an octet stream.

How do I go about doing this?

This is the code I have so far on my client side

const xhr = new XMLHttpRequest();
xhr.open("POST", "MY_URL", true);
xhr.responseType = "arraybuffer";

// I need to send some data for the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

// send request
xhr.send(`identifier=${myIdentifier}`);

xhr.onload = function (xEvent)
{
    const arrayBuffer = xhr.response;
    if (arrayBuffer)
    {
        const byteArray = new Uint8Array(arrayBuffer);

        const url = window.URL.createObjectURL(new Blob([byteArray]));

        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "file.pdf"); //or any other extension
        document.body.appendChild(link);
        link.click();
    }
};

• javascript
• file
• xmlhttprequest
• buffer
• binary-data

• are you getting type of the file or is there any possibility to get file type? – Vishnu Shenoy Commented Nov 11, 2020 at 5:08
• @VishnuShenoy Thank you for replying. The endpoint on my server actually gets the data from an external private endpoint and forwards it to my client. I'm mostly sure the private endpoint sends file type, but I don't know how to get the file type from the response and send it to my client. On the private endpoint the file downloads and opens correctly. – StackMatch Commented Nov 11, 2020 at 5:36
• i have done this but it need file type then only it will work.... wait ill share you the code – Vishnu Shenoy Commented Nov 11, 2020 at 5:42
• I'm still looking for help on this. – StackMatch Commented Dec 5, 2020 at 6:52

1 Answer 1

convert arraybuffer to base64 and then to url, generate fileUrl for view

arrayBufferToBase64(Arraybuffer, Filetype, fileName) {
        let binary = '';
        const bytes = new Uint8Array(Arraybuffer);
        const len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const file = window.btoa(binary);
        const mimType = Filetype === 'pdf' ? 'application/pdf' : Filetype === 'xlsx' ? 'application/xlsx' :
          Filetype === 'pptx' ? 'application/pptx' : Filetype === 'csv' ? 'application/csv' : Filetype === 'docx' ? 'application/docx' :
            Filetype === 'jpg' ? 'application/jpg' : Filetype === 'png' ? 'application/png' : '';
        const url = `data:${mimType};base64,` + file;
    
        // url for the file
        this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    
        // download the file
          const a = document.createElement('a');
          a.href = url;
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
      }