2015-03-16 3 views
2

У меня есть старый код javascript для печати изображений, если пользователь нажимает на миниатюру. Он работал нормально, но в последнее время (только в Chrome!) В предварительном просмотре есть пустая страница.Хром печать пустая страница

Демонстрация в JsBin: http://jsbin.com/yehefuwaso/7 Нажмите на значок принтера. Теперь попробуйте в Firefox; он будет работать, как ожидалось.

Chrome: 41.0.2272.89 м

Firefox: 30,0, 36.0.1

function newWindow(src){ 

    win = window.open("","","width=600,height=600"); 
    var doc = win.document; 
    // init head 
    var head = doc.getElementsByTagName("head")[0]; 
    // create title 
    var title = doc.createElement("title"); 
    title.text = "Child Window"; 
    head.appendChild(title); 
    // create script 
    var code = "function printFunction() { window.focus(); window.print(); }"; 
    var script = doc.createElement("script"); 
    script.text = code; 
    script.type = "text/javascript"; 
    head.appendChild(script); 
    // init body 
    var body = doc.body; 
    //image 
    doc.write('<img src="'+src+'" width="300">'); 

    //chrome 
    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 

     win.printFunction();    

    } else { 
     win.document.close(); 
     win.focus(); 
     win.print(); 
     win.close(); 
    } 
} 

ответ

2

Похоже, он пытается напечатать до <img> загрузится, переместите вызов печати внутри обработчика событий для нагрузки случае window, открыв ссылку в качестве данных URI или Blob, например

var code = '\ 
    <html>\ 
     <head>\ 
      <title></title>\ 
      <script>\ 
    function printFunction() {\ 
     window.focus();\ 
     window.print();\ 
     window.close();\ 
    }\ 
    window.addEventListener(\'load\', printFunction);\ 
      </script>\ 
     </head>\ 
     <body><img src="'+src+'" width="300"></body>\ 
    </html>'; 

window.open('data:text/html,' + code, '_blank', 'width=600,height=600'); 

Не забывайте, что вы, возможно, потребуется HTML закодировать теги в code


Вы могли бы просто слушать нагрузки на <img> вместо этого, но если вы когда-нибудь сделать что-то более сложное, чем tring, чтобы напечатать одно изображение, которое может быть обнаружено в будущем.

doc.write('<img onload="printFunction();" src="'+src+'" width="300">'); 

printFunction Где функция печати для всех браузеров

+0

я столкнулся с подобной проблемой при попытке напечатать IFRAME. Вызов 'print()' изнутри '$ (iframe [0] .contentWindow) .load()' исправляет проблему. –

1

Вы должны ждать, пока изображение, чтобы закончить загрузку:

var img = new Image(); 
img.src = src; 
img.style.width = '300px'; 
img.onload = function(){ 
    doc.write(img); 
}; 
1

я столкнулся с той же проблемой в Chrome. Вы можете попробовать эти подходы, первый работал для меня. setTimeout не работал для меня (пришлось отредактировать это позже).

function printDiv(divName) { 

    var printContents = document.getElementById(divName).innerHTML; 
    w = window.open(); 

    w.document.write(printContents); 
    w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>'); 

    w.document.close(); // necessary for IE >= 10 
    w.focus(); // necessary for IE >= 10 

    return true; 
} 

SetTimeout:

<div id="printableArea"> 
     <h1>Print me</h1> 
</div> 

<input type="button" onclick="printDiv('printableArea')" value="print a div!" /> 



    function printDiv(divName) { 

     var printContents = document.getElementById(divName).innerHTML; 
     w = window.open(); 
     w.document.write(printContents); 

     w.document.close(); // necessary for IE >= 10 
     w.focus(); // necessary for IE >= 10 

     setTimeout(function() { // necessary for Chrome 
      w.print(); 
      w.close(); 
     }, 0); 

     return true; 
    } 
Смежные вопросы