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();
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'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;
I'm using the following code to save file as csv.
$scope.saveCSVFile = function (result)
{
var a = document.createElement('a');
a.href = 'data:application/csv;charset=utf-8,' + encodeURIComponent(result.data);
a.target = '_blank';
a.download = $scope.getFileNameFromHttpResponse(result);
document.body.appendChild(a);
a.click();
$scope.isReportInProgress = false;
};
The file is working on most of the cases but for some reason when the file is larger than 10MB i get "Failed - Network Error".
It happens only on chrome.
I tried to search the web for this issue and couldn't find anything relevant.
Can you think of an idea why does it happens? or maybe use a different save file method that will work on chrome/firefox/IE instead of my function?
I was finally used this one, hope it can help the next one encounter this issue:
var blob = new Blob([result.data], {type: 'text/csv'});
var filename = $scope.getFileNameFromHttpResponse(result);
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
I had a similar problem, but had to serve a zip file, sent from the server in base64 format. What did the trick for me:
function downloadBlob(data, filename) {
const blob = new Blob([new Buffer(data, 'base64')], {type: 'application/octet-stream'});
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
const elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
window.URL.revokeObjectURL(elem.href);
document.body.removeChild(elem);
}
}
return (
{/* ... */}
<a href="#" onClick={() => {downloadBlob(report.zip, `${report.filename}.zip`)}}>
Download <b>{report.filename}.zip</b>
</a>
{/* ... */}
);
I left the function because like the fact that it revokes the URL after serving the file.
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>
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)