1

たとえば、たくさんのテキストと表が載っているページがあります。

ユーザーが「このテーブルを印刷する」javascriptリンクを使用してテーブルだけを印刷できるようにしたいのですが、それでもページの残りの部分を通常のブラウザの印刷方法で印刷できるようにしたいです。

まず、print.cssスタイルシートを以下のように含めます。

<link type="text/css" rel="stylesheet" href="style/print.css" media="print">

print.cssには、クラス'.noPrint'が表示されるように設定されています：none。

解決策は、divのテーブルではないコンテンツを「tempNoPrint」クラスでラップし、「print this table」をクリックすると、javascriptで「tempNoPrint」を使用してすべてのdivに「noPrint」を追加することです。したがって、プリンタバージョンでそれらを非表示にします。

それは問題ありません、そして私はきっとうまくいくでしょう。

ただし、テーブルのみの印刷が完了した後、すべての「tempNoPrint」divから「noPrint」クラスを削除するにはどうすればよいですか？印刷ダイアログから送信されるJavaScriptコールバックはありますか？私はタイマーを使うことができましたが、それは非常に信頼できないようです。

4

2 に答える 2

4

これは少し核心的なアプローチかもしれませんが、この種のことにつまずいたときに私が以前に行ったことは、印刷したいビットを非表示の iframe に出力してそれを印刷することです。

//build new document
var code = "<!doctype html><html><head>";

//add in CSS needed by the table
code += "<link rel='stylesheet' type='text/css' href='table.css' /></head><body>";

//get and add in table code
var code += "<table>"+document.getElementById('some_table').innerHTML+"</table>";

//finish up new doc code
code += "</body></html>";

//write new doc to hidden iframe (name: hiddenFrame)
var doc = hiddenFrame.document.open("text/html","replace");
doc.write(code);
doc.close();

//print
hiddenFrame.print();
于 2012-04-05T10:35:40.023 に答える
2

問題を複雑にしすぎていたようです。

「noPrintCustom」クラスのボタン div で印刷したくないページ上のすべてのコンテンツをラップしてから、この関数を呼び出します。

var printCustom = function() {

    $('.noPrintCustom').addClass('noPrint');
    window.print();
    $('.noPrintCustom').removeClass('noPrint');
}

助けてくれたすべてに感謝します！

于 2012-04-06T07:16:22.790 に答える