0

上部にデータの概要を表示し、下部にグリッドを表示する HTML ページがあります。上部にボタンがあり、ページ上の情報を特定の形式で印刷する必要があります。この特定の形式を紹介し、ビジネスの承認を得るために、div とテーブルで構成される追加の HTML ページを作成しました。ページ 1 の印刷ボタンをクリックすると、次のコードが実行されます。

function print() {   
    $.get('PrintLayout.html', function (data) {
        var $data = $(data);
        $data.find('#field1').text($('#field1').text() + ' (' + $('#field2').text() + ')');
        $data.find('#field3').text($('#field3').text());
        $data.find('#field4').text($('#field4').text());
        $data.find('#field5').text(kendo.toString(field5, 'dd MMMM yyyy'));
        $data.find('#field6').text($('#field6').text());
        $data.find('#grid').append($('#grid').html());
        var html = $('<div>').append($data.clone()).remove().html(),
            width = 1120,
            height = 600,
            left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2),
            printPage = window.open('', 'Print', 'scrollbars=yes, width=' + width + ', height=' + height + ', left=' + left + ', top=' + top);
        printPage.document.open();
        printPage.document.write(html);
        printPage.document.close();
        printPage.focus();
        printPage.print();
        printPage.close();
        return false;
    });
}

このコードが行うことは、印刷レイアウト ページの HTML を取得し、そのページの特定の要素にフィールド値を追加することです。

ポップアップ ウィンドウとビュー ソースのマークアップを見ると、html 要素や head 要素さえ存在しないことに気付きました。ポップアップするウィンドウにはすべての情報が適切な場所に含まれていますが、紙の上ではグリッドの見出しと列がずれて表示されます。ページのマークアップを修正すれば、印刷物も正しく見えることはわかっています。

どうすればこれを修正できますか? PrintLayout.html ページには適切なマークアップがあることに注意してください。これは、どういうわけか $data JQuery がこれを抽出しないためです。

私が望むのは、PrintLayout.html ページの HTML を取得し、そのページのプレースホルダーに値を挿入し、結果のマークアップをポップアップ ウィンドウに表示して印刷することだけです。私はそれを複雑にしすぎていると思いますが、それを行う簡単な方法を見つけることができません。

4

1 に答える 1

1

HTML がどのように機能するかはよくわかりませんが、これを行うより簡単な方法は、CSS に別のメディアを追加することです。そうすれば、元のページだけが必要になり、ポップアップを開いてデータを移動する必要がなくなります。

@media print {
   /*Put the way you want to format your page on printing here*/
}

こちらのW3C リファレンスを参照してください。

于 2013-08-14T16:57:52.260 に答える