Download File from Bytes in JavaScript

Download File from Bytes in JavaScript

I asked the question long time ago, so I might be wrong in some details.

It turns out that Blob needs array buffers. That's why base64 bytes need to be converted to array buffers first.

Here is the function to do that:

function base64ToArrayBuffer(base64) {
var binaryString = window.atob(base64);
var binaryLen = binaryString.length;
var bytes = new Uint8Array(binaryLen);
for (var i = 0; i < binaryLen; i++) {
var ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes;
}

Here is my function to save a pdf file:

function saveByteArray(reportName, byte) {
var blob = new Blob([byte], {type: "application/pdf"});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
var fileName = reportName;
link.download = fileName;
link.click();
};

Here is how to use these two functions together:

var sampleArr = base64ToArrayBuffer(data);
saveByteArray("Sample Report", sampleArr);

File download a byte array as a file in javascript / Extjs

I had to convert the file into a Uint8Array before passing it to the Blob

var arr = data.file;
var byteArray = new Uint8Array(arr);
var a = window.document.createElement('a');

a.href = window.URL.createObjectURL(new Blob([byteArray], { type: 'application/octet-stream' }));
a.download = data.filename;

// Append anchor to body.
document.body.appendChild(a)
a.click();

// Remove anchor from body
document.body.removeChild(a)

Reading this answer helped a lot https://stackoverflow.com/a/16245768/1016439

Write Byte Array to a file JavaScript

Since you are requesting a binary file you need to tell XHR about that otherwise it will use the default "text" (UTF-8) encoding that will interpret pdf as text and will mess up the encoding. Just assign responseType property a value of 'blob' or the MIME type of pdf

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; // tell XHR that the response will be a pdf file

// OR xhr.responseType = 'application/pdf'; if above doesn't work

And you will access it using response property and not responseText.
So you will use arr.push(xhr.response); and it will return you a Blob.

If this doesn't work, inform me will update another solution.

Update:

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; // tell XHR that the response will be a pdf file
xhr.onload = function() {
var blob = this.response;
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = "tst.pdf";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};

Download file on React js passed as byte array

Give this a try, While converting to the blob give the type as your file type like PDF or whatever your file type is, Then create object url and open in new window with window.open.
In below code I am trying to download same file which you will select with file tag in download function.

<input type="file" onChange="Upload(this)"></input>
<script>
function Upload(element) {
var reader = new FileReader();
let file = element.files[0];
reader.onload = function () {
var arrayBuffer = this.result;
Download(arrayBuffer, file.type);
}
reader.readAsArrayBuffer(file);
}

function Download(arrayBuffer, type) {
var blob = new Blob([arrayBuffer], { type: type });
var url = URL.createObjectURL(blob);
window.open(url);
}

</script>

Download a byte array in binary format

OK - Now I see what's happening.

Thank you for updating your post :)

You're inadvertantly converting Int8Array "dados" into a text string. Whoops!

Here's an alternative approach:

<!DOCTYPE html>
<html>
<body>

<h1>Writing a binary file</h1>

<script>
function download(bytes, fname) {
debugger;
let blob = new Blob([bytes], {type:"application/octet-stream"});
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fname;
link.click();
}

let dados = new Int8Array(10);
dados[0]=65;
dados[1]=66;
dados[2]=67;

download(dados, "teste.bin");
</script>

</body>
</html>

I would also consider terrymorse's excellent suggestion about using fetch()

'Hope that helps!

Angular 13 - Download file from ByteArray data

You can use file-saver

import { saveAs } from 'file-saver';

const file = new Blob([content], {type: 'text/plain'});
FileSaver.saveAs(file, "test.txt");


Related Topics



Leave a reply



Submit