用css打印div与css不工作

时间:2016-04-24 19:39:45

标签: javascript jquery html css google-chrome

我正在使用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中工作

1 个答案:

答案 0 :(得分:1)

以下代码对我来说很好

<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>