If you would like to covert stream of bytes (blob) to string in client side, you can easily done with below few lines of code using
text() method.
// Easy way
var blb = new Blob(["Lorem ipsum sit"], {type: "text/plain"});
var strValue = '';
new Response(blb).text().then(t => {
console.log(t);
});
Above code does not work in
IE browser. if you see below table, you can understand the syntax supported by each browser.
So, above
text() method won't work in
IE browser. To fix this, we can
FileReader to read the blob value. we have to attach "
loadend" event to FileReader which will get triggered after read completed. Once read completed, we can get the completed blob object into string. please refer the below code.
// IE FIX
var blb = new Blob(["Lorem ipsum sit - IE FIX"], {type: "text/plain"});
var strValue = '';
const readText = (blobString) => {
console.log(blobString);
}
// Since IE not supporting text(), we are using FileReader to convert the blob to string.
const showLocalError = this.showError;
const reader = new FileReader();
// this event get triggered once read from blob is completed. once loadend event triggered, we can retrieve the value.
reader.addEventListener('loadend', function () {
if (reader && reader.result) {
readText(reader.result.toString());
} else {
console.log('Error in converting blob to string');
}
});
// using readAsText, we are start to reading the blob. Once reading completed, loadend event will get trigged
reader.readAsText(blb);
