We Keep Coding

JavaScript Canvas Download

I have a problem downloading my drawing from a canvas. This is my code:
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
const le = link.href;
console.log(le);
le.download = filename;
};
download.addEventListener('mousedown', function() {
downloadCanvas(this, 'draw', 'Drawing.jpeg');
}, false);
The console show the value of le, which is the link to download, but the file isn't downloaded... What is wrong here? I'm a beginner.

The issue you have is you're attempting to download a link location, whereas you simply need to be downloading the link file.
To fix this, you should change the const le = link.href; to const le = link;. However, you might as well just get rid of the const le and change le.download to link.download.
Hope that helps!
Edit:
Here's a cleaned up version of the code:
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
};
download.addEventListener('mousedown', function() {
downloadCanvas(this, 'draw', 'Drawing.jpeg');
}, false);

Downloading a PDF using JavaScript that is Cross Browser Compatible

I can download a PDF using AngularJS in Chrome, but this doesn't appear to work in the latest FireFox, Internet Explorer 11 or Edge (assuming it doesn't work for IE10 either), and I know a shim is needed for IE9. Don't know if this the best shim for this if anyone has an opinion, but currently it doesn't seem to work. I tried it with a response type of blob and arraybuffer just in case that made a difference, and it doesn't.
All this counters what caniuse indicates about using the Blob URLs. Anyone have this working in IE9 and up, and the last couple versions of FF, and can point out what I'm doing wrong?
$http({
url: '/api/v1/download',
method: 'GET',
responseType: 'blob' // or 'arraybuffer'
}).then(function (response) {
// Use the Blob object to create an object URL to download the file
var url = URL.createObjectURL(response.data);
// var url = URL.createObjectURL(new Blob([response], {type: 'application/pdf'})); // arraybuffer version
// Create an anchor to perform download, but don't append to the DOM
anchor.href = downloadUrl;
anchor.download = filename;
anchor.target = '_blank';
anchor.click();
URL.revokeObjectURL(downloadUrl);
anchor = null;
}).catch(function (reason) {
console.log('FAIL', reason);
});
UPDATE
Currently the best (only) answer works for IE10, 11, Edge, FF, and continues to work with Chrome. IE9 won't work using this solution if anyone has another polyfill/shim/other/etc, and Safari doesn't support the download attribute so the solution in the chosen answer doesn't work in an SPA since it just redirects the current page so in both these cases I've just left TODO stubs.
This is an update to the posted answer with more information added in comments for anyone to use or hopefully add to so IE9 and Safari work as expected:
function performDownload(blob, filename) {
// IE9 has no API for handling downloads using Blob objects, and doesn't support the download attribute
if(isIE() == 9) {
// TODO: polyfill/shim/other... change response type to?
}
// Only works for IE10 and up, including Edge
else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// Provides a prompt to save the file to a location of users choice
window.navigator.msSaveBlob(blob, filename);
}
// Browsers that adhere to current standards can implement downloads
// using the Blob object with the download anchor attribute
// ---
// NOTE: Edge 13+ is compliant with both these standards, but Edge 12
// does not support the download anchor attribute so all versions
// have been grouped to use the propriety `msSaveBlob` method
else {
// Use the Blob object to create an object URL to download the file
var URL = window.URL;
var downloadUrl = URL.createObjectURL(blob);
var anchor = document.createElement('a');
if(angular.isDefined(anchor.download)) {
anchor.href = downloadUrl;
anchor.download = filename;
anchor.target = '_blank';
document.body.appendChild(anchor); // Required by Firefox
anchor.click();
// Release the existing object URL, and the anchor
$timeout(function () {
URL.revokeObjectURL(downloadUrl);
document.body.removeChild(anchor);
anchor = null;
}, 100);
}
else {
// TODO: Safari does not support the download anchor attribute...
}
}
}

I've used this with success in both IE11 and Chrome:
function saveBlob(response, contentType, filename) {
let blob = new Blob([response.arrayBuffer()], { type: contentType });
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE workaround
window.navigator.msSaveBlob(blob, filename);
} else {
let URL = window.URL;
let downloadUrl = URL.createObjectURL(blob);
if (filename) {
let a = document.createElement('a');
if (typeof a.download === 'undefined') {
window.location.href = downloadUrl;
} else {
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
}
} else {
window.location.href = downloadUrl;
}
// cleanup
setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100);
}
}

How can I display the print option for a pdf stream returned by a wcf service?

My wcf service create a pdf stream and return it, through the ajax call I'm properly handling the display in a new window and the download of the pdf file.
There is an option that I need to add which is directly show the print options for the document.
I tried using iframe but the document preview doesn't properly show the pdf as expected.
This code works fine for download:
var blob = b64toBlob(base64PDF, { type: 'application/pdf;' });
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = f + ".pdf";
link.click();
This is the code I'm trying to use to send the document to the printer:
var blob = b64toBlob(base64PDF, { type: 'application/pdf;' });
var iUrl = window.URL.createObjectURL(blob);
iUrl.download = f + ".pdf";
printPdf(iUrl);
function printPdf(url) {
var iframe = this._printIframe;
if (!this._printIframe) {
iframe = this._printIframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.style.display = 'none';
iframe.onload = function () {
setTimeout(function () {
iframe.focus();
iframe.contentWindow.print();
}, 1);
};
}
iframe.src = url;
}
I also tried few other approaches that are not any better.
var blob = b64toBlob(base64PDF, { type: 'application/pdf;' });
var iUrl = window.URL.createObjectURL(blob);
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = iUrl;
iframe.onload = function () {
setTimeout(function () {
iframe.focus();
iframe.contentWindow.print()
}, 1);
};
document.body.appendChild(iframe);
This code open the printing window but the document looks wrong, I basically get This:
Pdf print preview
As my pdf stream is a base64 string I thought I can create the blob directly as base 64, so I tried this code
var blob = new Blob([base64PDF], { type: 'application/pdf;base64,' })
var iUrl = window.URL.createObjectURL(blob);
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = iUrl;
iframe.onload = function () {
setTimeout(function () {
iframe.focus();
iframe.contentWindow.print()
}, 1);
};
document.body.appendChild(iframe);
Now nothing happen and I don't get the print preview page but in the console I get "Resource interpreted as Document but transferred with MIME type application/pdf:"

Generate an image of a div and Save as

I'd like to create an input button "Save image" that :
take a screen shot of a div
ask to "Save as" on the user's computer
I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly :
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});
}
But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I'm a little bit confused... I think I'll have to use the FileSaver.js and to create a new blob
http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/
But I don't get how to implement the saveAs in my html2canvas, how to cast properly a new blob...
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
var blob = new Blob(img, {type: "image/jpeg"});
var filesaver = saveAs(blob, "my image.png");
}
});
}
Also I tried to do something with this, by extracting the base64 generated URL, but it's too complicated for me to understand everyting :
http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752
But someone give me a few tips and help me please ?

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");
}
});
}

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);
}

Have you looked at
http://eligrey.com/demos/FileSaver.js/
Looks like it does what you need

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");
});
}

Nowadays html2canvas has changed to javascript promise. So the updated code should be:
function PrintDiv(div)
{
html2canvas(div).then(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);
}

Saving text in a local file in Internet Explorer 10

I need to be able to save a string into a local file. Based on the code in here I got the following going:
function saveTextAsFile(fileNameToSaveAs, textToWrite) {
var textFileAsBlob = new Blob([textToWrite], {
type: 'text/plain'
});
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (true) { //window.webkitURL !== null) {
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
} else {
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}
This works fine for Chrome and Firefox, but not for Internet Explorer 10 as
downloadLink.click();
gives:
SCRIPT5: Access is denied.
Is there any explanation/solution to this ?
thanks!

IE 10 and 11 use a distinct syntax for downloading or saving blobs to the client machine. Once you've created a blob, use:
window.navigator.msSaveBlob(blob, 'file.txt');
or
window.navigator.msSaveOrOpenBlob(blob, 'file.txt');
to trigger the file save or file save/open dialog.
For more info, see http://msdn.microsoft.com/en-us/library/ie/hh673542(v=vs.85).aspx

Thx to mstubna, here is a solution for Chrome, FF, and IE>9:
function saveTextAsFile(fileNameToSaveAs, textToWrite) {
/* Saves a text string as a blob file*/
var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
ieEDGE = navigator.userAgent.match(/Edge/g),
ieVer=(ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
if (ie && ieVer<10) {
console.log("No blobs on IE ver<10");
return;
}
var textFileAsBlob = new Blob([textToWrite], {
type: 'text/plain'
});
if (ieVer>-1) {
window.navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs);
} else {
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = function(e) { document.body.removeChild(e.target); };
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
}

For modern browsers solution goes like this, tested: IE11, FF & Chrome
var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'});
//IE11 & Edge
if (navigator.msSaveBlob) {
navigator.msSaveBlob(csvData, exportFilename);
} else {
//In FF link must be added to DOM to be clicked
var link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', exportFilename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

plus for ie EDGE:
var ieEDGE = navigator.userAgent.match(/Edge/g);
if (ie || ie11 || ieEDGE) {
if (ieVer>9 || ieEDGE) {
var textFileAsBlob = new Blob([textToWrite], {
type: 'text/plain'
});
window.navigator.msSaveBlob(textFileAsBlob, fileName);
} else {
console.log("No supported on IE ver<10");
}
} else { ... }

You can use FileSaver library to achieve that. Easy to use, takes care of browser types and versions.
There is an AngularJS version available as well.