2013-04-04 2 views
4

현재 그래프 작성 용 플러그인에 http://www.flotcharts.org/을 사용하고 있습니다. 나는 내용으로 둘러싸인 페이지에서 플롯 그래프를 인쇄하는 기능을 얻으려고합니다. 새 창을 열어 캔버스 객체를 인쇄하려고하므로 플롯 그래프 만 인쇄 할 수 있으며 성공적으로 완료했습니다. 그러나 캔버스를 이미지로 만들어서 새 창에서 열 수 있도록해야합니다. 왜냐하면 창을 새 창에서 사용할 수 없기 때문입니다.플롯 그래프를 인쇄 중입니다. 8

canvas.toDataURL(); 

Internet Explorer 8에서 나는 toDataURL() 메소드가 없다는 오류가 발생합니다. 인터넷 익스플로러 8은 캔버스 태그를 지원하지 않으며 플롯은 해결 방법을 사용해야하기 때문에 이것이라고 생각합니다. 그렇다면 새로운 브라우저와 인터넷 익스플로러 8의 페이지에서 플롯 그래프를 어떻게 만듭니 까?

답변

4

플로 차트를 인쇄하려고 할 때도 같은 문제가있었습니다. 새 창을 여는 대신 캔버스를 페이지 상단으로 옮기고 나머지는 숨기고 인쇄 한 다음 모든 것을 다시 넣을 수 있습니다. 이것은 최신 브라우저 및 IE8에서도 작동합니다. 또한 동일한 페이지에 있으므로 외부 스타일과 라이브러리 (jquery/flot)가 유지됩니다.

<body> 
    <div id="wrapper"> 
     <div id="some-element></div> 
     <canvas id="my-canvas"></canvas> 
     <button type="button" id="print-button">PRINT</button> 
     <div id="some-other-element></div> 
    </div> 
</body> 

및 자바 스크립트 함수 : HTML 구조와

function printContent(whatToPrint, priorSibling, afterSibling) 
{ 

    $('#wrapper').hide();//hide content wrapper inside of body 

    //take what to print out of wrapper and place directly inside body 
    $(whatToPrint).appendTo('body'); 

    window.print();//print the window 

    //put everything back 
    $('#wrapper').show(); 

    if (priorSibling != null) 
    { 
     $(whatToPrint).insertAfter(priorSibling); 
    } 
    else if (afterSibling != null) 
    { 
     $(whatToPrint).insertBefore(afterSibling); 
    } 

} 

및 자바 스크립트 인쇄 버튼 이벤트

$('#print-button').click(function(){ 

    printContent($('#my-canvas'), $('#some-element'), null); 

}); 

참고 시스템을 이용하지 않고 크롬 인쇄, 대화 상자 인쇄, 귀하의 스타일 엉망 수 있습니다. 이것은 단지 크롬입니다. 누구든지 해결책이 있다면 알려주세요.

+0

이렇게했습니다. 래퍼를 마크 업에 넣어야했지만, 작업 비용을 지불하는 데는 약간의 대가가있었습니다! – jacksonfiverniner

1

또한 Excanvas 대신 Flashcanvas (flashcanvas.net)를 사용해 볼 수도 있습니다. toDataURL을 지원해야합니다.

관련 문제