3

誰かがボタンをクリックすると、htmlページ(ページの下半分)のdivDisplayと呼ばれる特定のdivのコンテンツを出力するJS関数があります。このdivのコンテンツは、ユーザーがページを操作したときに動的に受信されます(ajax)。印刷はFF、OPERA、IEで完全に機能しますが、データは色なしでスクランブルされ、印刷されるポップアップウィンドウのクロムとサファリで正しい位置から外れます(cssフォーマットがないかのように)。

function jsPrintDiv(m) {

    glblPopupWindow = window.open("", "PrintWindow", "width=1024,height=768,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
    glblPopupWindow.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="styles.css"></head><body><div name="divDisplay" id="divDisplay">' + document.getElementById(m).innerHTML + '</div></body></html>');
    glblPopupWindow.document.close();
    glblPopupWindow.document.getElementById("divDisplay").style.top = "0px";

    glblPopupWindow.focus();
    glblPopupWindow.print();
    glblPopupWindow.close();

}

styles.cssは、印刷が行われている元のhtmlページと同じcssファイルです。同じことがdoctypeにも当てはまります。

divDisplayのcss :

#divDisplay {
    position: absolute;
    left: 0.2%;
    top: 305px;
    width: 99.6%;
    bottom: 0.5%;
    /* height: expression(document.body.offsetHeight - 314 + "px"); */
    overflow: auto;
    background-color: #AACCFF;
    font-family: palatino linotype;
    font: palatino linotype;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

私が間違っているかもしれないアイデアはありますか?前もって感謝します!

編集:

印刷するポップウィンドウの正しいデータ(firefox):http: //img208.imageshack.us/img208/8195/ffprint.jpg

印刷するポップウィンドウのスクランブルデータ(クロム):http: //img152.imageshack.us/img152/6108/chprint.jpg

EDIT2: コメントアウトした場合

glblPopupWindow.print();

行、クロムはそれを正しく表示します。それが役立つかどうかわからない。

4

1 に答える 1

2

表示される Firefox ウィンドウは、Firefox の印刷プレビューではありません。スクリーン ショットは実際のポップアップ ウィンドウであるため、正しく表示されます。このページを Firefox で開き、[ファイル] -> [印刷プレビュー] に移動すると、Chrome で表示されているものと非常によく似たものになるはずです。

Web ページを印刷すると、表示したときと同じように表示されるとは限りません。印刷するページの印刷スタイル シートを追加するか、既存のシートに印刷スタイルを追加できます。CSS で、印刷用のスタイルを指定します。

@media print {
    /* Your Styles Here */
}

また、ブラウザーは印刷用の Web ページを異なる方法で解釈する場合があります。サイトを印刷するための適切な css を定義するのは本当に大変です。幸運を。

于 2013-01-11T23:09:54.693 に答える