Yüksek grafikler grafiğini pdf'ye dönüştürmek için html2canvas'ın kullanılması, IE ve Firefox üzerinde çalışmaz

Question

Bir çörek grafiğini pdf'ye indirmek için html2canvas.js ve html2canvas.svg.js (sürüm 0.5.0 beta1) ve highcharts.js kullanıyoruz .

Bu, Chrome'da beklendiği gibi çalışır, ancak IE ve Firefox'ta bu çalışmaz. IE'de grafik hatalı işlenir ve Firefox'ta hiç işlenmez.

Aşağıda

Krom

IE (Kenar)

Firefox

Krom, IE ve Firefox indirme ekran vardır

aşağıdaki i html2canvas yapmak kullanıyorum kod gibidir:

html2canvas($("#container"), { 
    onrendered: function (canvas) { 
     var imgData = canvas.toDataURL(
     'image/png'); 
     var doc = new jsPDF('p', 'mm'); 
     doc.addImage(imgData, 'PNG', 10, 10); 
     doc.save('sample-file.pdf'); 
    } 
    }); 

Burada konuyu gösteren bir jsFiddle oluşturduk - http://jsfiddle.net/jko0rs5g/3/

kimse, bu sorunun nedeni bu olabilir biliyor mu ve Bunu nasıl çözebiliriz?

DÜZENLEME biz ihraç Highcharts inşa kullanmıyorsunuz neden

Sadece netleştirmek için biz bu tür ek şemasının üstünde veya altında bilgilerin veya bir skorla olarak Highcarts, ek html eklerken için bu örneğin çöreğin içinde. Bunu yansıtmak için jsfiddle'ı güncelledim.

Answer 1

Doğru yönde nod için Pawel Fus sayesinde, hvml2canvas çağırmadan önce geçici olarak svg'yi bir tuvalle değiştiren canvg.js'yi kullanarak çalıştık.

Son sayı, svg içindeki html'den bazılarının yazı tipini (maalesef şablonlarımızın birçoğunu) boyutlandırmak için kullandığı zaman ortaya çıktı. Aşağıda, svg'yi bir tuvale sığdırmadan önce alttaki piksel boyutuna em'leri kullanarak herhangi bir şey için yazı tipi boyutunu güncelleştirerek bulduk (gerçek yazı tipi boyutunu nasıl hesapladığımızı görmek için Get computed font size for DOM element in JS'a bakın) Aşağıda indirme düğmesi için güncellenmiş kod

$('#download').click(function() { 
    var svgElements = $("#container").find('svg'); 

    //replace all svgs with a temp canvas 
    svgElements.each(function() { 
    var canvas, xml; 

    // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element. 
    $.each($(this).find('[style*=em]'), function(index, el) { 
     $(this).css('font-size', getStyle(el, 'font-size')); 
    }); 

    canvas = document.createElement("canvas"); 
    canvas.className = "screenShotTempCanvas"; 
    //convert SVG into a XML string 
    xml = (new XMLSerializer()).serializeToString(this); 

    // Removing the name space as IE throws an error 
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); 

    //draw the SVG onto a canvas 
    canvg(canvas, xml); 
    $(canvas).insertAfter(this); 
    //hide the SVG element 
    $(this).attr('class', 'tempHide'); 
    $(this).hide(); 
    }); 


    html2canvas($("#container"), { 
    onrendered: function(canvas) { 
     var imgData = canvas.toDataURL(
     'image/png'); 
     var doc = new jsPDF('p', 'mm'); 
     doc.addImage(imgData, 'PNG', 10, 10); 
     doc.save('sample-file.pdf'); 
    } 
    }); 

    $("#container").find('.screenShotTempCanvas').remove(); 
    $("#container").find('.tempHide').show().removeClass('tempHide'); 
}); 

burada eylem bunun güncelleştirilmiş jsfiddle Bkz tıklayın - http://jsfiddle.net/zuvzcgvz/22/