用css在chrome中打印div不起作用答案

【问题标题】：print div in chrome with css not working用css在chrome中打印div不起作用
【发布时间】：2016-08-18 02:27:49
【问题描述】：

我正在使用 window.print();对于在网页上打印特定部分，它在 Firefox 浏览器上工作，但在 Chrome 中无法正常工作，它显示空白打印预览。

 <script type="text/javascript">
    function printDiv() {
    var divToPrint = document.getElementById('table');
    var htmlToPrint = '' +
        '<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />'+
        '<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />';
        $(document).ready(function() {
    $('#customers').dataTable();
        } );
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
}
    </script>

上面的代码在 chrome 中也可以正常工作，但从过去 15 天开始，它不能在 chrome 中工作，而是在 Firefox 中工作

【问题讨论】：

也许这是 chrome 50 版本的问题，我也遇到了新版本的问题。你是什么版本？
我的 chrome 版本 50.0.2661.87 m

标签： javascript jquery html css google-chrome

【解决方案1】：

我有一个类似的问题，我想用给定的 css 打印一个创建的窗口，但是 css 不适用于 chrome。

事实证明，在我们尝试打印它之前，我们需要等到创建的窗口加载完毕（在这里找到它：https://stackoverflow.com/a/25396932/13294887）。基本上通过使用

myWindow.onload = function() { 
  myWindow.print(); 
  myWindow.close();
};

https://jsfiddle.net/quoritius/qx2ujtby/21/

【讨论】：

【解决方案2】：

以下代码对我来说很好

<script type="text/javascript">
        $(function () {
            $("#btnPrint").click(function () {
                var contents = $("#table").html();
                var frame1 = $('<iframe />');
                frame1[0].name = "frame1";
                frame1.css({ "position": "absolute", "top": "-1000000px" });
                $("body").append(frame1);
                var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
                frameDoc.document.open();
                //Create a new HTML document.
                frameDoc.document.write('<html><head><title>DIV Contents</title>');
                frameDoc.document.write('</head><body>');
                //Append the external CSS file.
                frameDoc.document.write('<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />');
                frameDoc.document.write('<link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />');
                //Append the DIV contents.
                frameDoc.document.write(contents);
                frameDoc.document.write('</body></html>');
                frameDoc.document.close();
                setTimeout(function () {
                    window.frames["frame1"].focus();
                    window.frames["frame1"].print();
                    frame1.remove();
                }, 500);
            });
        });
    </script>

【讨论】：