从HTML模板打印页面
提问于 2013-08-14 16:38:31
我有一个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页面的超文本标记语言，将值插入到该页面的占位符中，在弹出窗口中显示结果标记并打印出来。我想我把它复杂化了，但是找不到更简单的方法。
回答 1
Stack Overflow用户
发布于 2013-08-14 16:57:52
我不太确定你的HTML是如何工作的，但一种更简单的方法是在你的CSS中添加一个单独的媒体。然后你只需要你的原始页面，不需要打开弹出窗口和移动数据：
@media print {
/*Put the way you want to format your page on printing here*/
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18237434
复制
腾讯云开发者
