谷歌瀏覽器打印預覽不會第一次加載頁面

Question

我正在嘗試使用此代碼打印頁面

<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文件加載樣式之前，我遇到了同樣的問題。 我通過將樣式直接傳遞到彈出窗口來解決這個問題。

我的問題是為什么會發生這種情況？ 如何在首次嘗試打印預覽時加載條形碼？

Answer 1

你需要在打印前放置延遲。 鉻有一種天然缺陷。

代碼如下： -

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

Answer 2

這對我有用（以及實現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加載。

Answer 3

我在自動彈出窗口中移動了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>

Answer 4

實際上你可以創建一個擴展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'即可識別它..

希望它會有所幫助......

谷歌瀏覽器打印預覽不會第一次加載頁面

問題描述

4 個解決方案

解決方案1
17 已采納 2015-10-30 05:47:19

解決方案2
3 2016-12-02 22:05:35

解決方案3
1 2015-02-08 06:15:53

解決方案4
0 2016-01-07 07:31:27

谷歌瀏覽器打印預覽不會第一次加載頁面

問題描述

4 個解決方案

解決方案1 17 已采納 2015-10-30 05:47:19

解決方案2 3 2016-12-02 22:05:35

解決方案3 1 2015-02-08 06:15:53

解決方案4 0 2016-01-07 07:31:27

解決方案1
17 已采納 2015-10-30 05:47:19

解決方案2
3 2016-12-02 22:05:35

解決方案3
1 2015-02-08 06:15:53

解決方案4
0 2016-01-07 07:31:27