플로 차트를 인쇄하려고 할 때도 같은 문제가있었습니다. 새 창을 여는 대신 캔버스를 페이지 상단으로 옮기고 나머지는 숨기고 인쇄 한 다음 모든 것을 다시 넣을 수 있습니다. 이것은 최신 브라우저 및 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);
});
참고 시스템을 이용하지 않고 크롬 인쇄, 대화 상자 인쇄, 귀하의 스타일 엉망 수 있습니다. 이것은 단지 크롬입니다. 누구든지 해결책이 있다면 알려주세요.
이렇게했습니다. 래퍼를 마크 업에 넣어야했지만, 작업 비용을 지불하는 데는 약간의 대가가있었습니다! – jacksonfiverniner