Làm cách nào để khắc phục tình trạng hình ảnh không hiển thị khi bấm in tài liệu trên Google Chrome?
Thông thường code javascript của bạn khi in trong một <div> sẽ có dạng như thế này:
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title>In đơn hàng</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
Tuy nhiên, khi thực hiện PrintElem(elem) sẽ xảy ra tình trạng hình ảnh của bạn lúc ẩn, lúc hiện và làm mất thời gian phải refresh trang để kiểm tra lại tình trạng của hình ảnh. Tất nhiên, nếu bạn rãnh thì việc đó hoàn toàn không sao. Nhưng, nếu khách hàng đang đứng đó chờ in ấn mà mất thời gian cho việc tải lại trang để kiểm tra hình ảnh trong tệp in của bạn đã hiển thị chưa thì hoàn toàn không cần thiết.
Chính vì thế, bạn có thể nhẹ nhàng cải tiến lại đoạn code bên trên theo cách sau:
JS
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'new div', 'height=400,width=600');
var is_chrome = Boolean(mywindow.chrome);
mywindow.document.write('<html><head><title>In đơn hàng</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10 and necessary before onload for chrome
if (is_chrome) {
mywindow.onload = function() { // wait until all resources loaded
mywindow.focus(); // necessary for IE >= 10
mywindow.print(); // change window to mywindow
mywindow.close();// change window to mywindow
};
}
else {
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
return true;
}
</script>
Giờ đây Code hoàn chỉnh sẽ như thế này:
HTML
<div class="print_version_new">
Nội dung cần in ấn
<img src=".....">
</div>
<a class="indonhang_print" href="javascript:" onclick="PrintElem('.print_version_new');">In đơn hàng</a>
Nếu đang gặp tình trạng như trên, thử ngay! Được không được gì inbox, comment bên dưới để cùng trao đổi thêm nhiều thông tin hay, hữu ích khác!
