0

我有一个 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，将值插入该页面上的占位符，在弹出窗口中显示生成的标记并打印它。我认为我过于复杂了，但找不到更简单的方法。

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 回答