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.
Related
I'm writing innerHTML of dynamically created SVG-elements to a .txt-file:
function saveCustomSVG(data, filename) {
var blob = new Blob([ data ], { type: "text/plain" });
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
};
saveCustomSVG(customShapes.innerHTML, "svgCode.txt")
It's working fine, just that all dynamically created stuff gets written in one endless line.
Would it be possible to add a line-break after each closing tag at any stage of the process?
I tried parent.appentChild('br') after each new el, but didn't work.
It currently looks like this:
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.
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>
Is it possible by angularjs download a piece of code generated by a form?
Add a simple code:
http://jsbin.com/nufixiwali/edit?html,js,output
I would generate an .html to download only the code generated after the html tag.
Thank you
something like
function downloadAsFile(filename, type, data) {
window.URL = window.URL || window.webkitURL;
var a = document.createElement("a");
var blob = new Blob([data], {type: type});
var url = window.URL.createObjectURL(blob);
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
}
downloadAsFile('myfile.html', 'text/html', myData)
Following Problem: this Code isn't working in IE9. And in an actual Chrome Browser it is working but the downloaded file is corrupt (the "corrupted file" part also could happen elsewhere ... any suggestion how to do it in IE9 would be nice ).
var file = records[0].data.Files[0].Value.Buffer;
var fileName = records[0].data.Files[0].Value.FileName;
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([file], { type: 'application/octet-stream' }));
a.download = fileName;
document.body.appendChild(a)
a.click();
document.body.removeChild(a)