jsPDF не отображает изображение в высоком разрешении на Edge browser

Question

Я новичок в jsPDF, и я пытаюсь загрузить highchart с некоторым содержимым html. Мой код работает отлично для всех браузеров, кроме «Microsoft Edge».
Работает Plunker. У меня есть аналогичные вопросы, но ни один из них не говорит о пограничном браузере, кроме того, я пытался использовать png-изображение вместо JPEG, например this, но не повезло.

Note: Я пробовал пропустить прямо изображение url для функции .addImage(), которая отлично работает со всеми браузерами.

Может кто-нибудь, пожалуйста, укажите мне, что мне не хватает или что-то не так?

Обновление: до версии 20, код работает нормально, проблема с более чем 20 версиями.

Answer 1

Проблема связана с проблемой Edge-Canvas, я полагаю.

Вместо SVG-> Canvas, я использовал SVG-> Blob-> Image-> Canvas.

На моем местном крае у меня была проблема, о которой вы упомянули в сообщении. С моей версией он хорошо работает и на Edge.

Вот что я сделал:

$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; 

} 

}; 

Plunker Link is here

Примечание:

Я только проверил на Chrome и Edge.

Мой Край версия: Microsoft Край 38.14393.0.0

My Chrome версии: Версия 56.0.2924.87

---

Редактировать

Существовал ошибка на IE 11 около ошибка canvas.toDataUrl(). Я исправил его и обновил код. Теперь он проверяет браузер и ведет себя по-разному в IE 11. Исходный код OP хорошо работает на IE 11, поэтому я не сделал ничего нового для этого, я просто проверяю версию IE браузера клиента.

В Угловом есть специальное свойство, которое используется следующим образом: var msie = document.documentMode;. Если браузер IE, msie будет NaN. Если это IE, msie - номер версии.

Источник: https://github.com/angular/angular.js/blob/master/src/Angular.js#L204-L209

---