10

I am getting base64 string from node JavaScript back-end. But it is not working like Chrome.

I can't find any solutions in web. Getting 200 status in API call but it is not downloading file in Firefox while same code working fine with Chrome.

Here is my code::

static downloadFile(fileName: string, fileMimeType: string, uri: string) {
    const dataURI = uri;
    const blob = this.dataURIToBlob(dataURI);
    const url = URL.createObjectURL(blob);
    const blobAnchor = document.createElement('a');
    const dataURIAnchor = document.createElement('a');
    blobAnchor.download = dataURIAnchor.download = fileName;
    blobAnchor.href = url;
    dataURIAnchor.href = dataURI;

    blobAnchor.onclick = function () {
        requestAnimationFrame(function () {
            URL.revokeObjectURL(url);
        });
    };

    blobAnchor.click();
}

static dataURIToBlob(dataURI) {

    const binStr = atob(dataURI.split(',')[1]),
        len = binStr.length,
        arr = new Uint8Array(len),
        mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    for (let i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
    }

    return new Blob([arr], {
        type: mimeString
    });

}

I am getting all the data from Node.js and working fine with Chrome. So I can't find any issue why it is not working with Firefox.

Zoe
  • 27,060
  • 21
  • 118
  • 148
Yash
  • 103
  • 5
  • 1
    When you say it's not working, can you be specific? What is happening? Is there an error at all? – user184994 Nov 01 '18 at 09:46
  • No , Error . Post request is successfully done and received base64 of pdf but not downloading in firefox. – Yash Nov 01 '18 at 09:47

1 Answers1

6

In firefox you have to append your a into DOM and then perform click.

Used document.body.appendChild(blobAnchor); to append into DOM.

Added blobAnchor.className = 'hidden'; so it will not be visible.

And removed from DOM after few seconds with setTimeout(() => blobAnchor.remove(), 300);.

static downloadFile(fileName: string, fileMimeType: string, uri: string) {
    const dataURI = uri;
    const blob = this.dataURIToBlob(dataURI);
    const url = URL.createObjectURL(blob);
    const blobAnchor = document.createElement('a');
    const dataURIAnchor = document.createElement('a');
    blobAnchor.download = dataURIAnchor.download = fileName;
    blobAnchor.className = 'hidden';
    blobAnchor.href = url;
    dataURIAnchor.href = dataURI;
    document.body.appendChild(blobAnchor);

    blobAnchor.onclick = function () {
        requestAnimationFrame(function () {
            URL.revokeObjectURL(url);
            setTimeout(() => blobAnchor.remove(), 300);
        });
    };

    blobAnchor.click();
}

static dataURIToBlob(dataURI) {

    const binStr = atob(dataURI.split(',')[1]),
        len = binStr.length,
        arr = new Uint8Array(len),
        mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    for (let i = 0; i < len; i++) {
        arr[i] = binStr.charCodeAt(i);
    }

    return new Blob([arr], {
        type: mimeString
    });    
}
Karan
  • 12,059
  • 3
  • 24
  • 40