谷歌浏览器打印预览第一次不加载页面

Question

谷歌浏览器打印预览第一次不加载页面

6

我正在尝试使用这段代码打印页面

<html>
<head>
    <script type="text/javascript">
        function Popup() 
        {

            var mywindow = window.open('', 'Ticket info', 'height=400,width=600');
            mywindow.document.write('<html><head><title>my div</title>');
            mywindow.document.write('<style type="text/css"> *{margin: 0; padding: 0;} body{padding: 3px; padding-left:20px;font:6px bold Arial;}</style>');
            mywindow.document.write('<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>');
            mywindow.document.write('<script src="jquery-barcode.min.js"><'+'/script>');
            mywindow.document.write('</head><body>');
            mywindow.document.write('<div id="demo"></div>');
            mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');
            mywindow.document.write('</body></html>');
            mywindow.print();
            return true;
        }
    </script>
</head>
<body>
<input type="button" value="Print Div" onclick="Popup();" />
</body>
</html>

基本上它会弹出一个窗口，显示页面的打印预览。第一次尝试加载打印预览时，不会加载条形码，当您取消第一个打印预览后，右键单击页面再次打印，第二个打印预览现在将显示条形码以进行打印。

我认为问题来自于这行代码：

mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');

当我注释掉这一行并在页面上添加一个虚拟文本时，它会自动显示在第一次尝试的打印预览中。

之前我也遇到过相同的问题，当我尝试从CSS文件加载样式时解决了这个问题，我通过直接将样式传递给弹出窗口来解决这个问题。

我的问题是为什么会发生这种情况？如何在第一次打印预览时加载条形码？

- Romeo

4个回答

4

这对我很有用（同时实现了Anand观察到的IE 10+要求）：

function Popup() {
    var _window = window.open('');
    _window.document.write(data);

    // required for IE >= 10
    _window.document.close();
    _window.focus();

    _window.document.body.onload = function() {
        // continue to print
        _window.print();
        _window.close();
    };

    return true;
}

不要等待窗口加载并尝试过早地打印它，而是等待整个document.body加载。

- Joseph Sutton

这对我来说比首选答案更有效（在Chrome上测试过），首选答案只能第一次使用，而后续无法使用。 - Okay

1

我把window.print()命令移到了弹出窗口本身上，这样它就可以在打印之前先加载jquery函数了。

这是我添加的那一行。

mywindow.document.write('<script type="text/javascript">window.print();<'+'/script>');

这是整个代码：

<html>
<head>
    <script type="text/javascript">
        function Popup() 
        {
            var mywindow = window.open('', 'Ticket info', 'height=400,width=600');
            mywindow.document.write('<html><head><title>my div</title>');
            mywindow.document.write('<style type="text/css"> *{margin: 0; padding: 0;} body{padding: 3px; padding-left:20px;font:6px bold Arial;}</style>');
            mywindow.document.write('<script src="http://code.jquery.com/jquery-latest.min.js"><'+'/script>');
            mywindow.document.write('<script src="jquery-barcode.min.js"><'+'/script>');
            mywindow.document.write('</head><body>');
            mywindow.document.write('<div id="demo"></div>');
            mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');
            mywindow.document.write('<script type="text/javascript">window.print();<'+'/script>');
            mywindow.document.write('</body></html>');
            return true;
        }
    </script>
</head>
<body>
<input type="button" value="Print Div" onclick="Popup();" />
</body>
</html>

- Romeo

0

实际上，您可以创建一个扩展CSS并将所有CSS放在其中...

默认

 mywindow.document.write('<link rel="stylesheet" type="text/css" href="/css/default.css"/>');

然后就像这样替换它

mywindow.document.write('<link rel="stylesheet" type="text/css" href="/css/default.css" media="print"/>');

只需添加 media='print' 即可识别它...

希望能有所帮助...

- Nelson Estuesta Jr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anand Deep Singh · Accepted Answer

你需要在打印之前加上延迟。 Chrome浏览器存在本地缺陷。

代码如下：

function PrintDiv(data) {
    var mywindow = window.open();
    var is_chrome = Boolean(mywindow.chrome);
    mywindow.document.write(data);

   if (is_chrome) {
     setTimeout(function() { // wait until all resources loaded 
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10
        mywindow.print(); // change window to winPrint
        mywindow.close(); // change window to winPrint
     }, 250);
   } else {
        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        mywindow.close();
   }

    return true;
}