In my Webix application, I am trying to download a file with a specific filename either taken from user or contstructed programmatically. The download functionality is working fine, however the file is always getting downloaded with the name 'download'.
Browser is Chrome. And I need to make it work on both Chrome and Firefox. Below is my working code for download:
Webix part :
mytoolbar =
{ id:'toolbarID',
view: 'toolbar',
height: rowHeight,
type: 'clean',
cols: [
{view:"button", id:"downld", label:"Download", width:100, tooltip: "Download data", on: {onItemClick:function(){downloadData()}} },
]
}
The callback function :
function downloadData() {
var $$ref = $$('mytext');
var value = $$ref.getValue();
var msg = "This is the " + value + "of the port";
// assume that the filename will be also be constructed like msg as
// as above.
document.location = 'data:Application/octet-stream,' + encodeURIComponent(msg)
}
I have vainly tried below things:
Webix download function which I need to download as .txt file, not working :
var $$ref = $$('mytext');
var value = $$ref.getValue();
var msg = "This is the " + value + "of the port";
var blob = new Blob([msg.toString()], { type: "application/pdf" });
webix.html.download(blob, "myfile.pdf");
Below one is working but, I am not able to pass a variable for the text and the filename. It is working only for hard coded text and filename. Any hint to provide the variable would be helpful. :
function downloadData() {
$('<a href="data:text/plain,Test" download="test.txt">')[0].click()
}
Below attempt is partially working. It is always downloading the file with a long text like "235d67c8-892f-465d-95c4-17bc3cc51849". Assume variable msg is as same as above :
function downloadData() {
var msg = "Contstucted as above by string concatenation";
var filename = file + ".txt"; //assume file is a var
var blob = new File([msg], filename, {"type": "application/octet-stream"});
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
window.location.href=a;
}
If I change the Webix button to anchor ( ) as below and pass download= "filename", that is also not working, however in this case there is no way to dynamically pass the filename variable.
{ template:"<a id = \"link\", onclick=\"downloadData()\" , href = \"#\" >Download</a>" },
Is there a way to achieve this when the front end is Webix ? The examples have been tried from various links on stackoverflow only, some are given below:
Is there any way to specify a suggested filename when using data: URI?
How to set a downloading file name using window.open in javascript
