我有这个功能来打印DIV.
每当页面加载并点击我的“打印”链接时,显示DIV没有CSS打印.
如果我关闭Chrome的打印可视化页面并再次单击“打印”链接,则DIV会应用CSS.
每当页面加载并点击我的“打印”链接时,显示DIV没有CSS打印.
如果我关闭Chrome的打印可视化页面并再次单击“打印”链接,则DIV会应用CSS.
有什么想法吗?
function printDiv(divId) { var printDivCsspre = '<link href="/static/assets/vendor/sb-admin-2-1.0.7/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">' + '<link href="/static/assets/vendor/sb-admin-2-1.0.7/dist/css/sb-admin-2.css" rel="stylesheet">' + '<div style="width:1000px; padding-right:20px;">'; var printDivCsspost = '</div>'; $('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>'); $("link").clone().appendTo($("#print_frame").contents().find("head")); window.frames["print_frame"].document.body.innerHTML = printDivCsspre + document.getElementById(divId).innerHTML + printDivCsspost; window.frames["print_frame"].window.focus(); var windowInstance = window.frames["print_frame"].window; windowInstance.print(); }
HTML
<a id="print" href="#"> <i class="fa fa-print"></i> Print </a> <script> $('#print').click(function () { printDiv('report') }) </script> <div id="report" class="report"> <p># Generated Table#</p> </div>
首先点击:
解决方法
每件事都是对的,只需改变顺序即可.在第一次单击时,它在浏览器调试器中没有在sources部分显示’print_frame’,而在第二次单击时它(我使用chrome devtool).
因此在onload期间使用css属性加载到内存框架中:
var windowInstance; $(function(){ $('body').append('<iframe id="print_frame" name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>'); $("link").clone().appendTo($("#print_frame").contents().find("head")); windowInstance = window.frames["print_frame"].window; });
和onClick只是附加html
$('#print').click(function () { var divId = 'report'; var printDivCsspre ='<div id="printReportDiv" style="width:1000px; padding-right:20px;">'; var printDivCsspost = '</div>'; window.frames["print_frame"].document.body.innerHTML = printDivCsspre + document.getElementById(divId).innerHTML + printDivCsspost; window.frames["print_frame"].window.focus(); windowInstance.print(); });
已更新jsfiddle
原文地址:https://www.jb51.cc/js/150990.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。