Generate an image of a div and Save as
Here is the final code, if it can helps you :
function PrintDiv(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var myImage = canvas.toDataURL();
downloadURI(myImage, "MaSimulation.png");
}
});
}
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
This works fine for me.
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
clearDynamicLink(link);
}
function DownloadAsImage() {
var element = $("#table-card")[0];
html2canvas(element).then(function (canvas) {
var myImage = canvas.toDataURL();
downloadURI(myImage, "cartao-virtual.png");
});
}
Have you looked at
http://eligrey.com/demos/FileSaver.js/
Looks like it does what you need
You could do this approach:
//Creating dynamic link that automatically click
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
//Your modified code.
function printToFile(div) {
html2canvas(div, {
onrendered: function (canvas) {
var myImage = canvas.toDataURL("image/png");
//create your own dialog with warning before saving file
//beforeDownloadReadMessage();
//Then download file
downloadURI("data:" + myImage, "yourImage.png");
}
});
}