Javascript 使用CSS在弹出窗口中打印内容_Javascript_Jquery_Html_Css

Javascript 使用CSS在弹出窗口中打印内容

javascript jquery html css

Javascript 使用CSS在弹出窗口中打印内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在弹出窗口中打印fancybox（它就像一个灯箱）的内容，但遇到了问题。原因是我直接调用print（）时没有加载css 这是我的密码： function printFancy() { var $fancycontent = $("div.fancybox-overlay .fancybox-inner").clone(); $fancycontent.find(".dontprint").remove(); var title = $fancycontent .

我试图在弹出窗口中打印fancybox（它就像一个灯箱）的内容，但遇到了问题。原因是我直接调用print（）时没有加载css

这是我的密码：

function printFancy() {
    var $fancycontent = $("div.fancybox-overlay .fancybox-inner").clone();
    $fancycontent.find(".dontprint").remove();


    var title = $fancycontent .find(".title");
    var base = $("base").attr("href");

    var mywindow = window.open('', 'print', 'height='+$(window).height()+',width='+$(window).width());
    mywindow.document.write('<html><head><title>'+title.html()+'</title>');
    mywindow.document.write('<base href="'+base+'">');

    $("link[rel=stylesheet]").each(function() {
        if($(this).attr("href").indexOf("neededstyles")!=-1) {
            var stylesheet=$(this).attr("href");
            mywindow.document.write('<link rel="stylesheet" href="'+stylesheet+'" type="text/css" />');
        }

    });
//this dont get fired.
    mywindow.document.write('</head><body onload="window.print()">');
    mywindow.document.write($fancycontent.html());
    mywindow.document.write('</body></html>');

//this dont get fired.
    mywindow.onload = function() {
        console.log("onload to print");
    };
    //this get fired but the CSS is not loaded
    jQuery(mywindow.document).ready(function() {
        console.log("ready to print");
        // mywindow.print();
        // mywindow.close();
    });


}

这很有效。如果某人的连接速度非常慢，则不确定它是否有效

编辑：在Firefox中，打印对话框仅在我关闭弹出窗口时出现。一定有更好的解决方案。

我的建议：将所有html保存在一个变量中，然后执行一次调用

mywindow.document.write（allHtmlForPrint）@JohnnyJS我试过了。都一样。仍然不知道为什么身体负荷不起作用。我将hole html复制到一个新文件中，当我打开它时，body onload工作。
setTimeout(function(){mywindow.print();mywindow.close()},1000);