Upload PDF file as BLOB and downloading as PDF again - javascript

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

Related

Download File in JS

i'm trying to download an xlsx file in aura component controller. This is my code, but it's not working:
var data = response.getReturnValue();
var blob = new Blob([data], { type : 'text/plain' });
console.log("jsonBlob", blob);
var link = window.URL.createObjectURL(blob);
window.location = link;

How can I overwrite a text file through javascript in edge browser?

I tried to overwrite a text file which is in local path through javascript in edge(chromium).
But it doesn’t work.
I want to know that if Edge(Chromium version) supports to create a text file into local path.
If it possible, how can I do that?
We can't overwrite the local text file through JavaScript, it is not secure. If you want to modify the local text file, you could upload it through JavaScript, then, read the text content in the web page, after modifying it, download it to the local path.
Please check the following sample:
<input type="file" id="inputfile" /><br />
<input type="button" id="btn-dwn" value="Download" /><br />
<textarea id="text-val" rows="4"></textarea><br />
<script>
function newFile(data, fileName) {
// download the content to a .txt file.
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
//IE11 support
console.log("IE& Edge");
// let blob = new Blob([data], { type: "text/html" });// text/plain;charset=utf-8
let blob = new Blob([data], { type: "text/plain;charset=utf-8" });
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {// other browsers
console.log("Other browsers");
var bl = new Blob([data], { type: "text/plain;charset=utf-8" });
var a = document.createElement("a");
a.href = URL.createObjectURL(bl);
a.download = fileName;
a.hidden = true;
document.body.appendChild(a);
a.click();
}
};
//using FileReader to read the .txt file content
document.getElementById('inputfile').addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
document.getElementById('text-val').value = fr.result;
}
fr.readAsText(this.files[0]);
});
//call the newFile function to download text file.
document.getElementById("btn-dwn").addEventListener('click', function () {
newFile(document.getElementById("text-val").value, "test.txt");
});
</script>

Set the file name and open blob word type

I am trying to download word document, it is working but i am not how to set file name. Every time it is downloading with some unique name.
this.downloadData("downloadVehicleLine").subscribe(
data => {
this.downLoadFile(data);
})
downLoadFile(data: any) {
var blob = new Blob([data], { type: 'application/octet-stream' });
var url = window.URL.createObjectURL(blob);
var pwa = window.open(url, "createdocument.docx");
if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
alert('Please disable your Pop-up blocker and try again.');
}
}
It should download word document with the name createdocument.docx
I think you can use an anchor element reference instead of window.URL; because you can set the name of the file to download property of the element.
You can use this code to download files:
var blob = new Blob([data], { type: 'application/octet-stream' });
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
// set the name of the file
link.download = "createdocument.docx";
// clicking the anchor element will download the file
link.click();

JS download file from the server does not working

I am getting from my server a png file. The response looks like this:
�PNG
IHDR|�<V� IDATx���w�T����ם^����I�
v[$��J��bL����oL�&єob���K��QEQ���RDzoK���˽�?f�Sd��ǃ���s���;�����s�����������������-��#DDDDDDDDDDDD�
When I'm trying to convert it to a blob and download it, the file is empty.
download() {
return this.http.get(url).map(res => this.downloadFile(res.text()));
}
private downloadFile(data) {
const blob = new Blob([data], {type: 'image/png'});
const url = window.URL.createObjectURL(blob);
return url;
}
this.download(this.config.guid).subscribe(url => {
var link = document.createElement("a");
link.href = url;
link.download = "data.png";
document.body.appendChild(link);
link.click();
});
What am I doing wrong?
If you don't need to support IE11, fetch makes it easy to get a Blob for a downloaded resource:
fetch(url).then(response => response.blob()).then(blob => {
// Use the blob here...
const blobUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = blobUrl;
link.download = "data.png";
document.body.appendChild(link);
link.click();
});
That said: I would just make the link an actual link and return the data with the Content-Disposition header set to attachment; filename=data.png. The browser will offer to save the file when the user clicks the link.

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.

Categories

Resources