Search code examples
javascriptjspdfhtml2canvas

html2canvas cut image and don't display 2 columns format in IE11

Im using html2canvas and jsPDF. The code works in Chrome and Edge, but not for IE11.
First img is what I want and the second is what IE generates
imageChrome

imageIE

Code: 

<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" ></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

window.scrollTo(0, 0);
html2canvas($("#html-content")[0]).then(function (canvas) {
    var imgData = canvas.toDataURL("image/jpeg",1.0);
    var pdf = new jsPDF('p', 'mm', 'a4');
    var width = pdf.internal.pageSize.getWidth();    
    pdf.addImage(imgData, 'JPG', 0, 0, width, 0);
    pdf.save("caseInfo.pdf");
});
Solution

  • I was getting 'Invalid DOCTYPE' in IE11.

    This is the html that works for me:

    <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">