2017-09-22 3 views
0

Highcharts 차트를 내보내고 js의 이메일로 보내려고합니다. 그렇게하기 위해 html2canvas 라이브러리를 사용하여 jspdf 객체에 추가했습니다. 모든 것이 크롬과 파이어 폭스에서 잘 작동했지만 IE에서 이것을 할 때 빈 PDF 파일이 나타났다. 의사 코드는 : IE 내가 외부 라이브러리 (bluebird.js)를 사용 약속을 지원하지 않지만 차트가 포함 된 div를 렌더링 할 때, 결과 PDF가 비어 있기 때문에Highcharts 차트의 html2canvas가 IE에서 제대로 작동하지 않습니다.

var 
    form = $('#main-content'), 
    cache_width = form.width(), 
    a4 = [100, 100]; 
    var canvas1 = html2canvas(form, { 
     imageTimeout: 6000, 
     removeContainer: true 
    }); 
    canvas1.then(function (canvas) { 

     var 
     img1 = canvas.toDataURL("image/JPEG", 1.0); 

     doc.addImage(img1, 'PNG', 0, 50, 440, 300); 

    }); 



    Promise.all([canvas1]).then(function() { 

     var pdfString = window.btoa(doc.output()); 
     var ob = {}; 
     ob.mail = mailsList; 
     ob.title = title; 
     ob.pdf = pdfString; 

     $.ajax({ 
      type: 'POST', 
      url: "/Charts/SendChart_ByEmail", 
      data: JSON.stringify(ob) 
     }); 

그러나 나는 다른 렌더링하려 div가 포함 된 차트를 포함하지 않습니다.

하이 차트 버그입니까? 블루 버드 문제? 어떤 해결 방법?

+0

이 문제가 발생하는 곳에서 완전히 작동하는 예제를 제공해주십시오. 감사. –

+0

문제는 ajax 요청으로 보내지는 pdf 문자열입니다. IE에서 작업 할 때 pdf 문자열의 길이는 20Kb입니다. 그러나 크롬에서 작업 할 때 문자열 길이는 약 300kb입니다. 차트가 캔버스로 완전히 내보내지지 않았기 때문에 이것이 빈 PDF로 이어 졌다고 생각합니다. @d_paul –

+0

canvas.todatauri에서 문제가 발생했습니다. 생성 된 이미지는 차트가 포함되지 않은 빈 div입니다. –

답변

0

문제가 사업부는 SVG를 포함하는 경우 canvas.todatauri가 IE에서 작동하지 않는 것이 었습니다, 감사합니다. 그래서 canvasg .. 위 코드를 다음으로 바 꾸었습니다.

var chart = $('#main-content').highcharts(); 
     var svg = chart.getSVG({ 
      exporting: { 
       sourceWidth: chart.chartWidth, 
       sourceHeight: chart.chartHeight 
      } 
     }); 
     var mycanvas = document.createElement('canvas'); 
     canvg(mycanvas, svg); 
     var imgtest = mycanvas.toDataURL("image/JPEG"); 
     doc.addImage(mycanvas.toDataURL("image/JPEG"), 'PNG', 0, 50, 440, 300); 
관련 문제