javascript 谷歌浏览器打印预览第一次不加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28343748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google chrome print preview does not load the page the first time
提问by Romeo
I'm trying to print a page using this code
我正在尝试使用此代码打印页面
<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>
Basically it will pop out a window and show a print preview of the page. the first attempt to load the print preview will not load the barcode and when you cancel the first print preview then right click the page and print again the 2nd print preview will now show the barcode to print.
基本上它会弹出一个窗口并显示页面的打印预览。第一次尝试加载打印预览不会加载条形码，当您取消第一次打印预览然后右键单击页面并再次打印时，第二次打印预览现在将显示要打印的条形码。
I think the issue is coming from this line:
我认为问题来自这一行：
mywindow.document.write('<script type="text/javascript">$("#demo").barcode("1234567890128", "code39");<'+'/script>');
when I comment this line and add a dummy text to the page. It will automatically show up in the print preview on the first attempt.
当我评论这一行并向页面添加一个虚拟文本时。第一次尝试时，它会自动显示在打印预览中。
I had the same issue before when I'm trying to load the style from a css file. I resolve this by transferring the styles directly to the popup window.
我之前在尝试从 css 文件加载样式时遇到了同样的问题。我通过将样式直接传输到弹出窗口来解决这个问题。
My question is why is this happening? and how can I load the barcode on the first attempt of the print preview?
我的问题是为什么会发生这种情况？以及如何在第一次尝试打印预览时加载条形码？
回答by Anand Deep Singh
You need to put delay before print. There is a native defect in chrome.
您需要在打印前设置延迟。铬有一个原生缺陷。
Code would as under :-
代码如下：-
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;
}
回答by sutt0n
This worked for me (as well as implementing Anand's observed IE 10+ requirements):
这对我有用（以及实现 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;
}
Instead of waiting for the window to load and attempting to print it prematurely, this just waits for the entire document.bodyto load.
而不是等待窗口加载并尝试过早地打印它，这只是等待整个document.body加载。
回答by Romeo
I moved the window.print() command on the pop up window it self so it can load the jquery function first before printing.
我在弹出窗口上移动了 window.print() 命令，因此它可以在打印之前先加载 jquery 函数。
This is the line that I added.
这是我添加的行。
mywindow.document.write('<script type="text/javascript">window.print();<'+'/script>');
This is the whole code:
这是整个代码：
<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>
回答by Nelson Estuesta Jr
actually you can create an extension css and place all your css in there...
实际上你可以创建一个扩展css并将你所有的css放在那里......
Default
默认
mywindow.document.write('<link rel="stylesheet" type="text/css" href="/css/default.css"/>');
Then just replace it like this
然后像这样替换它
mywindow.document.write('<link rel="stylesheet" type="text/css" href="/css/default.css" media="print"/>');
just add media='print' to recognize it..
只需添加 media='print' 即可识别它..
Hope it will help...
希望它会有所帮助...
