Javascript download burden for IE and other browsers

By admin, February 20, 2018

Once I came out if this problem happens regardless if the base system were in Java or PHP.

The code comments are in Portuguese, the usage is straightforward and oversimplified: it names the output file. So you can easily replace the way the file is named.

It considers the existence of a datepicker and might be outdated.

/* REGISTER DOWNLOAD HANDLER */
/* Only convert the canvas to Data URL when the user clicks.
This saves RAM and CPU ressources in case this feature is not required. */
function dlCanvas() {
var canvas = document.getElementById(‘awesomeCloudawesomecloud’);
var link= this;

if (canvas.msToBlob) { //for IE
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, ‘awesomecloud.png’);
} else {
//other browsers
link.href = canvas.toDataURL();
link.download = “awesomecloud.png”;
}

//var canvas = document.getElementById(‘awesomeCloudawesomecloud’);
//var dt = canvas.toDataURL(‘image/png;base64;’);
/* Change MIME type to trick the browser to downlaod the file instead of displaying it */
//dt = dt.replace(/^data:image\/[^;]*/, ‘data:application/octet-stream‘);

/* In addition to <a>’s “download” attribute, you can define HTTP-style headers */
//dt = dt.replace(/^data:application\/octet-stream/, ‘data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=awesomecloud.png’);
console.log(‘entrou 1’);
//this.href = dt;
//window.open(dt);
};
/** listener for the above action **/
$(function () {
document.getElementById(‘download’).addEventListener(‘click’, dlCanvas , false);
});

/**
* The event handler for the link’s onclick event. We give THIS as a
* parameter (=the link element), ID of the canvas and a filename.

$(function () {
document.getElementById(‘download’).addEventListener(‘click’, function() {
downloadCanvas(this, ‘awesomeCloudawesomecloud’, ‘awesomecloud.png’);

}, false);
});

// A XLSX download function
function fazerDownloadXLSX(){
var postData = getPostData();
postData[“client”] = $(“#client_num”).text();

var recursiveEncoded = $.param( postData ); // Converte o objeto em parametros para chamada de get e post 😉
//var recursiveDecoded = decodeURIComponent( $.param( postData ) ); // Usar essa para debug, apena  s

console.log( recursiveEncoded ); //Olha só o que essa linha gera
// console.log( recursiveDecoded );; //Apenas para facilitar o debug
console.log(222);
// A linha abaixo garante o download com os parametros 😉
// Eh Javascript puro
var canvas = document.getElementById(‘awesomeCloudawesomecloud’);

if (canvas.msToBlob) {
var blob = canvas.msToBlob();
console.log(223);
$.get(“docloud-xlsx.php?”+recursiveEncoded, function( my_var ) {
console.log(224);
// my_var contains whatever that request returned
var xslxData = new Blob(my_var, {type: ‘Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;’});
window.navigator.msSaveBlob(xlsxData, ‘awesomecloud.xlsx’);
//window.location.href=”docloud-xlsx.php?”+recursiveEncoded;
});

} else {
console.log(225);
//other browsers
link.href = “docloud-xlsx.php?”+recursiveEncoded;
link.download = “awesomecloud.xlsx”;
}

//$.getJSON(‘docloud-csv.php’, postData); // old

$(function () {

initializeDatePicker();
initMenu();
});

}

function fazerDownloadCSV(){
var postData = getPostData();
postData[“client”] = $(“#client_num”).text();

var recursiveEncoded = $.param( postData ); // Converte o objeto em parametros para chamada de get e post 😉
//var recursiveDecoded = decodeURIComponent( $.param( postData ) ); // Usar essa para debug, apena  s

console.log( recursiveEncoded ); //Olha só o que essa linha gera
// console.log( recursiveDecoded );; //Apenas para facilitar o debug

// A linha abaixo garante o download com os parametros 😉
// Pure Javascript
window.location.href=”docloud-csv.php?”+recursiveEncoded;
//$.getJSON(‘docloud-csv.php’, postData); // old

$(function () {

initializeDatePicker();
initMenu();
});

}