Файл Png, который не загружается в Internet Explorer при использовании html2canvas.js в JQuery

Question

У меня есть кнопка в приложении, которая экспортирует элементы html в файл png. Я сделал это, используя html2canvas.js. Он отлично работает в браузерах Chrome Chrome и Mozilla Firefox. Но он не работает в Internet Explorer. Когда я нажимаю эту кнопку в IE, она просто показывает пустую страницу. Я предоставил код в следующем. Любая помощь приветствуется.

$("#btnPng").click(function() { 
      $("#divPulledPopUpButtons").hide(); 
      html2canvas($("#pulledPopUp"), { 
       onrendered: function (canvas) { 
        var url = canvas.toDataURL(); 
        $("<a>", { 
         href: url, 
         download: "CAR.png" 
        }) 
        .on("click", function() { $(this).remove() }) 
        .appendTo("body")[0].click() 
        $("#divPulledPopUpButtons").show(); 
       } 
      }) 
     }); 

Answer 1

У меня есть решение для вышеуказанной проблемы. Его можно решить, используя функцию canvas.msToBlob(). msToBlob() может использоваться только для браузера Internet Explorer, а для других браузеров мы можем использовать canvas.toDataURL(). Я предоставил код, который отлично работает в Internet Explorer и других браузерах.

$("#btnPng").click(function() { 
      $("#divPulledPopUpButtons").hide(); 

      html2canvas($("#pulledPopUp"), { 
       onrendered: function (canvas) { 
        // debugger; 
        if (canvas.msToBlob) { //for IE 
         var blob = canvas.msToBlob(); 
         window.navigator.msSaveBlob(blob, 'CAR.png'); 
        } 
        else { 
         var url = canvas.toDataURL('image/png', 1.0);// Other broswers except IE 
         $("<a>", { 
          href: url, 
          download: "CAR.png" 
         }) 
         .on("click", function() { $(this).remove() }) 
         .appendTo("body")[0].click() 

        } 
        $("#divPulledPopUpButtons").show(); 
       } 
      }) 
     });