How do I convert a data buffer in JavaScript into a file? - Stack Overflow

admin 管理员组

文章数量: 1086019

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

Share Improve this question Follow asked Nov 11, 2020 at 4:30 StackMatchStackMatch 9911 gold badge11 silver badge1515 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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);
      }

本文标签： How do I convert a data buffer in JavaScript into a fileStack Overflow