Javascript 从HTML模板打印页面

我有一个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;
    });
}

函数print（）{
$.get（'PrintLayout.html'，函数（数据）{
var$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=$（''）.append（$data.clone（））.remove（）.html（），
宽度=1120，
高度=600，
左=（屏幕宽度/2）-（宽度/2），
顶部=（屏幕高度/2）-（高度/2），
printPage=window.open（“”，“打印”，“滚动条=是，宽度=‘+宽度+’，高度=‘+高度+’，左侧=‘+左侧+’，顶部=‘+顶部）；
printPage.document.open（）；
printPage.document.write（html）；
printPage.document.close（）；
printPage.focus（）；
printPage.print（）；
printPage.close（）；
返回false；
});
}

这段代码的作用是获取打印布局页面的HTML，并将字段值添加到该页面上的特定元素中

当我查看弹出窗口和视图源代码的标记时，我注意到甚至没有html或head元素。弹出的窗口包含所有正确位置的所有信息，但在纸上，我的网格的标题和列出现错位。我知道如果页面的标记被更正，打印输出看起来也会正确

我怎样才能解决这个问题？请注意，PrintLayout.html页面确实有适当的标记，只是$data JQuery没有提取这个标记

---

我所要做的就是获取PrintLayout.HTML页面的HTML，将值插入该页面上的占位符，在弹出窗口中显示生成的标记并打印它。我认为我把它复杂化了，但找不到更简单的方法。我不太清楚HTML是如何工作的，但更简单的方法是在CSS中添加一个单独的媒体。然后，您只需要原始页面，无需打开弹出窗口并四处移动数据：

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

---

请参阅。

我没有发现任何问题，它对我来说工作正常。请参阅此提琴：在Internet Explorer中尝试，并确保在新页面（window.open…）中显示html。在这个新页面中，右键单击并查看源代码，然后查看是否有正确的标记。我也不认为您可以在JSFIDLE中复制它。不幸的是，JSFIDLE中不允许使用document.write。这就是我在FIDLE中添加它的原因。好的，让我看看对不起，但不幸的是，我的要求是有弹出窗口，以便他们可以预览正在打印的内容。例如，它们都使用IE.Chrome自动显示要打印的页面预览。不幸的是，令我失望的是，他们都使用IE。。。