9

print css を使用して特定の要素を非表示にし、不要なときに改ページを停止しています。ユーザーは、印刷する前にセクションを非表示にすることを選択できます。

私の問題は、印刷プレビューを行うと、余分な空白ページが常に (Chrome と Firefox では最後に、Opera では最初に) 表示され、その理由がわからないことです。IEには問題がなく、余分なページはありません（これは衝撃的です...）

ご意見をいただければ幸いです。コンテナー div page-break-after: avoid; を作成しようとしました。および page-break-after: auto; しかし、どちらも機能しませんでした。また、table.plain { page-break-inside:void; を取り出します。違いはありませんでした。

ユーザーが非表示アイコンをクリックすると、テーブルに除外クラスが追加されます。これは機能し、除外クラスを含むものは印刷物に表示されません。ユーザーが印刷したい最終ページは、1 ページに収まるか、収まらない場合があります。

これが私のhtmlです：

<body>
    <div id="main">
        <div id="content">
            <div id="side" class="exclude">
                ...logo, etc, shown at side on screen...
            </div>            
            <div id="data">
                <table class="printOnly plain printHeader">
                    ...logo, etc, to print at top...
                </table>                
                <div>
                    <table class="detail plain">
                        <tbody>
                            <tr>
                                <td class="rel">
                                    <div class="abs exclude visibility">
                                        <a href="#" class="show ico-show ico hid">Show</a>
                                        <a href="#" class="hide ico-hide ico">Hide</a>
                                    </div>
                                    <h3>Contact</h3>
                                </td>
                            </tr>
                            ...more tr with contact details...
                        </tbody>
                    </table>
                    ...more tables with other details...
                </div>
            </div> //data
        </div> //content
    </div> //main
</body>

ここに私の印刷CSSがあります：

@media print {
    .exclude {
        display: none !important;
    }

    .printOnly {
        display:block !important;
    }

    div#data,
    div#data div {
        width: 98% !important;
        border: none !important;
    }

    table.plain { page-break-inside:avoid; }
}

あなたの助けを前もって感謝します:)

4

4 に答える 4

0

CSSリセットを試してみることをお勧めします。リセットは、さまざまなブラウザーが同じように Web サイトを表示するのに役立つはずです。http://meyerweb.com/eric/tools/css/reset/にあるものを試すことができますが、私は一度も使用したことがないので、どのように機能するかはわかりません。印刷スタイル専用の CSS リセットをグーグルで検索することもできます。

于 2013-06-22T23:43:45.183 に答える
0

別の print.css の代わりにメディア クエリを使用してこの問題を解決するには、次の手順を試してください。

html, body {
    height: 100%;
    @media print {
        /* This fixes an issue where when printing a selection,
         an extra blank page is printed in IE10 and IE11.
         Solution found here: http://stackoverflow.com/a/22320644/7752 */
        height: auto;
    }
}
于 2016-06-28T15:37:05.837 に答える