Develop Reference

Upload PDF file as BLOB and downloading as PDF again

I'm am trying to upload a pdf file, convert it to a BLOB and download again as a pdf file. At the moment I get no errors but when I download the file I get a blank pdf with what looks like a corrupted file name.
I am saving the BLOB in the pdfFile vairable.
<input type="file"
#change="onNewFileUpload($event)">
async onNewFileUpload($event) {
const file = $event.target['files'][0];
const fileReader = new FileReader();
const self = this;
fileReader.onload = function() {
pdfFile = new Blob([fileReader.result], { type: "application/pdf" })
}
fileReader.readAsText(file);
},
<button
#click="downloadPdfFile()"
class="btn btn-success">Download pdfFile</button>
downloadBOBSCertificate() {
const link = document.createElement('a');
// create a blobURI pointing to our Blob
// link.href = pdfFile;
link.href = URL.createObjectURL(pdfFile);
link.download = 'test.pdf';
// some browser needs the anchor to be in the doc
document.body.append(link);
link.click();
link.remove();
// in case the Blob uses a lot of memory
setTimeout(() => URL.revokeObjectURL(link.href), 7000);
}

doesn't able to download image in react using blob

I have a QR code that is coming from the database in the base64 format. I have to download this image on a button click. I use this function to download the image on button click. the function runs successfully and I able to download the image, but when I try to open the image, an error message comes in 'Photos', 'Paint' type application says the file is not supported. I use same code for download an CSV data and it is working perfectly fine.
What is the error in this code?
export const downloadCSV=(data, filename,image)=>
{
var downloadLink;
if(image !== null && image === true)
{
var dataType = 'image/png';
}
else{
var dataType = 'application/vnd.ms-excel';
}
var filename = filename;
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', data], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
downloadLink.href = 'data:' + dataType + ', ' + data;
downloadLink.download = filename;
downloadLink.click();
}
}

PDF Blob not saving with content

I have this code:
$.post('/pdf/render', params, function (data) {
var blob = new Blob([data], {type: 'application/pdf'});
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = "results.pdf";
document.body.appendChild(a);
a.click();
}):
Once my PDF downloads, the clicked URL and blob saves my PDF with the correcct number of pages, but there is nothing in the PDF. Am I doing something wrong with my blob? Why would there be no content when I am getting the content from the backend?
For clairfication, I checked with cURL and got a proper PDF with content.

AngularJs: XML File is Not Downloading in Firefox

I'm new in AngularJS as well as in UI. I'm trying to download XML file. Which is working fine in Google Chrome but in Mozilla Firefox it is not able to download. My JS function is:
response.success(function(data){
var blob = new Blob([data], {type: "application/xml"});
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',window.URL.createObjectURL(blob));
downloadLink.attr('download', "file.xml");
downloadLink[0].click();
});

I tried with other way and Now It's working in Firefox-
var element = document.createElement('a');
var blob = new Blob([data], {
type: 'text/xml'
});
var url = URL.createObjectURL(blob);
element.href = url;
element.setAttribute('download', 'acl.xml');
document.body.appendChild(element);
element.click();

Read data from BLOB URL in Javascript

I have a BLOB URL, and I want to recreate it as a second BLOB URL, so that it is downloaded by default.
var blob1 = new Blob(["Hello world!"], { type: "text/plain" });
url1 = window.URL.createObjectURL(blob1);
blob2=new Blob([url1], {type: 'application/octet-stream'});
url2 = window.URL.createObjectURL(blob2);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url2;
a.click();
window.URL.revokeObjectURL(url);
See in JSFiddle:
https://jsfiddle.net/7spry3jn/
But this only creates a text file containint the first URL. How can I Read data from the first BLOB URL in Javascript and feed it to create the second BLOB?

You can use the download attr in anchor element, that force the download and you dont need to reate another blob.
But you need to pay attentio about browser support, see here all the browsers that accept the downloadattr: Can I Use
var blob1 = new Blob(["Hello world!"], { type: "text/plain" });
url = window.URL.createObjectURL(blob1);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.setAttribute("download","Any name");
a.click();
window.URL.revokeObjectURL(url);
And to read the content from a Blob you can use FileReader like this:
var myBlob = new Blob(["Hello"], {type : "text/plain"});
var myReader = new FileReader();
//handler executed once reading(blob content referenced to a variable) from blob is finished.
myReader.addEventListener("loadend", function(e){
document.getElementById("text").innerHTML = e.srcElement.result;//prints a string
});
//start the reading process.
myReader.readAsText(myBlob);
<p id="text"></p>