從HTML模板打印頁面

Question

我有一個HTML頁面，其頂部顯示數據摘要，底部顯示網格。 我在頂部有一個按鈕，它必須以某種格式在頁面上打印信息。 為了展示這種特定格式並獲得企業的認可，我創建了一個附加的HTML頁面，該頁面由div和一個表格組成。 單擊頁面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，將值插入該頁面上的占位符，在彈出窗口中顯示生成的標記並進行打印。 我認為我過於復雜了，但是找不到更簡單的方法。

Answer 1

我不太確定您的HTML的工作方式，但是更簡單的方法是將單獨的媒體添加到CSS中。 然后，您只需要原始頁面，而無需打開彈出窗口並移動數據：

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

請參閱此處的W3C參考 。