javascript - .print() 関数を使用して、特定のセレクターからコンテンツを印刷することは可能ですか?

Question

次のように、特定の CSS/DOM セレクター要素からコンテンツを印刷することは可能ですか。

var elem = document.getElementById('div'); // where div innerHTML contains: Hello, Mars!
elem.print();

JavaScript を使用して、ページ全体ではなくドキュメントの特定の部分を印刷することはできますか?

Answer 1

を使用@mediaして、印刷する要素を選択できます。

@media print{
    .dontPrint{
        display: none;
    }
}

<p>You will see me!</p>
<p class="dontPrint">You won't see me!</p>
<button>Print</button>

$("button").click(function(){
    print();
});

Demo

---

ご覧のとおり、 の要素.dontPrintは印刷プレビューに表示されません。表示したくないすべての要素にこのクラスを適用できます。

---

別

@media print{
    .dontPrint{
        display: none;
    }
}

<p>You will see me!</p>
<p>You won't see me!</p>
<button>Print</button>

$("button").click(function(){
    printTarget($("p:eq(0)"));
});

function printTarget(ele){                    //input target element(s)
    $(ele).data({print: true});
    $("body *").filter(function(){
        console.log($(this).data().print);
        return !$(this).data().print;
    }).addClass("dontPrint");
    print();
    $("*").removeClass("dontPrint");
}

Demo

Answer 2

別の方法として、これを試すことができます（別のウィンドウを使用）

function print()
{
    var printWin = window.open();
    printWin.document.write(document.getElementById('printable_div').innerHTML);
    printWin.print();
    printWin.close();
}

デモ。