jbu*_*483 5 html css printing-web-page kendo-grid
我已经与这个问题斗争了很长一段时间,并且(仍然)无法使用其样式打印我的 div。
目前,我的脚本是:
$('#printMeButton').click(function () {
//alert("a");
var data = document.getElementById('thisPrintableTable').outerHTML;
var mywindow = window.open('', data);
mywindow.document.write('<html><head><title>Print Me!!!</title>');
// mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
Run Code Online (Sandbox Code Playgroud)
它嵌套在一个$(document).ready函数中。
当我包含所需的样式表(当前已注释掉)时,打印预览中不会出现任何内容。
我还有一些对表格外观有影响的脚本,因此,我相信这可能是将这些包含在弹出窗口中的关键。
我如何将其包含在新的弹出窗口中?
有人可以建议一种按原样打印的方法吗?
编辑历史
</head><body>var datahaveouterHTML而不是innerHTML尝试使用 window.open 打开本地 html 文件,并在其中链接 css。并使用js设置要打印的内容html到本地html文件中。
这是要打印的页面:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
</head>
<body>
<div id="print">
<div class="red">TODO write content</div>
</div>
<button id="print_btn">Print</button>
<script>
$('#print_btn').click(function(){
var newWindow = window.open('print.html','_blank');
$(newWindow).load(function(){
$(newWindow.document).find('body').html($('#print').html());
});
})
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
css文件test.css链接在这里,我在window.open时打开print.html,test.css也链接在print.html中
现在,在 print.html 中我会写:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
6846 次 |
| 最近记录: |