It seems that the issue at hand is linked to a problem with Edge-Canvas.
In my case, I decided to use the SVG->Blob->Image->Canvas method instead of SVG->Canvas.
Initially, when testing on my local Edge browser, I encountered the same problem as mentioned in the post. However, after implementing my version it worked smoothly on Edge as well.
Here's a breakdown of what I did:
$scope.chartWithContentDownload = function() {
var doc = new jsPDF('portrait', 'pt', 'a4', true);
var elementHandler = {
'#ignorePDF' : function(element, renderer) {
return true;
}
};
var source = document.getElementById("top-content");
doc.fromHTML(source, 15, 15, {
'width' : 560,
'elementHandlers' : elementHandler
});
var msie = document.documentMode;
if (!isNaN(msie) && msie < 12) {
// code for IE < 12
var tempSVG = $('#testchart').highcharts().container.innerHTML;
var canvas11 = document.createElement('canvas');
canvg(canvas11, tempSVG);
var dataUrl = canvas11.toDataURL('image/JPEG');
doc.addImage(dataUrl, 'JPEG', 20, 300, 560, 350);
var source2 = document.getElementById("bottom-content");
doc.fromHTML(source2, 15, 650, {
'width' : 560,
'elementHandlers' : elementHandler
});
setTimeout(function() {
doc.save('TestChart.pdf');
}, 2000);
} else {
var svg = document.querySelector('svg');
var width = $('#testchart').find('svg').width();
var height = $('#testchart').find('svg').height();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var DOMURL = window.URL || window.webkitURL || window;
var data = (new XMLSerializer()).serializeToString(svg);
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.canvas.width = width;
ctx.canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
DOMURL.revokeObjectURL(url);
var dataUrl = canvas.toDataURL('image/jpeg');
doc.addImage(dataUrl, 'JPEG', 20, 300, 560, 350);
var source2 = document.getElementById("bottom-content");
doc.fromHTML(source2, 15, 650, {
'width' : 560,
'elementHandlers' : elementHandler
});
setTimeout(function() {
doc.save('TestChart.pdf');
}, 2000);
};
img.src = url;
}
};
Access the Plunker Link here
Note:
I conducted tests only on Chrome and Edge browsers.
The version of my Edge is: Microsoft Edge 38.14393.0.0
My Chrome version is: Version 56.0.2924.87
Edit
Previously, there was a bug on IE 11 concerning canvas.toDataUrl() security error, which has now been resolved with the updated code. The behavior changes depending on the browser, specifically addressing actions for IE 11. The original code provided by the OP functions properly on IE 11, so no further adjustments were made outside of checking the client's IE browser version.
An Angular-specific property was used as follows:
var msie = document.documentMode;
. This property helps identify the browser type - returning NaN for non-IE browsers and the version number for Internet Explorer.
Source: https://github.com/angular/angular.js/blob/master/src/Angular.js#L204-L209