javascriptで画面のスクリーンショットをとって印刷

画面の見た目とおりに印刷したい場合、普通にwindow.print()すると@media screenなCSSが効かなくなってしまったり、@media printが効いたりして意図した通りに印刷できない。 こんな場合は、一度canvasにコピーしてから印刷するといいかもしれない。

1. html2canvasでcanvasにコピー
2. bodyに追加
3. その他の要素を隠す
4. window.printする。
5. 印刷後にcanvasを削除して、要素をもとに戻してOK。

$(".canvas").click(function(e){
   html2canvas(document.body, {
        onrendered: function(canvas) {
           $("body").append($(canvas));
            $("div").hide();
            window.print();
            $(canvas).remove();
            $("div").show();
        }
   });
});