2015-08-26 2 views
0

У меня есть fiddle print table, но штрих-код, отображающий пробел. Как распечатать таблицу со штрих-кодом?Как распечатать таблицу с изображением с помощью javascript?

Пример кода Javascript, как этот

function printData() 
{ 
    var divToPrint=document.getElementById("printTable"); 
    newWin= window.open(""); 
    newWin.document.write(divToPrint.outerHTML); 
    newWin.print(); 
    newWin.close(); 
} 

$('button').on('click',function(){ 
printData(); 
}) 

ответ

1

http://jsfiddle.net/0tc9hb7u/12/

Сначала вы должны получить все изображения в новом окне

var images = newWin.document.getElementsByTagName("img"); 

Затем следует вызвать newWin.print() только тогда, когда все изображения загружены ,

var imagesLoaded = 0; 
for (var i = 0; i < images.length; i++) { 
    var image = images[i]; 
    var img = new Image(); 

    img.onload = function() { 
     imagesLoaded++; 
     // Ok, image was loaded, let's check if it was the last image to load 
     if (imagesLoaded === images.length) { 
      newWin.print(); 
     } 
    } 
    var oneSrc = image.getAttribute('src'); 

    img.src = oneSrc; 
}; 
+0

Обновлено мой ответ с 'print' вызова при загрузке изображения;) –

+0

Спасибо :) это работает для меня. У меня вопрос, я добавил изображение как водяной знак на jsfiddle. Но это не отображается. Вы можете проверить это. Http://jsfiddle.net/0tc9hb7u/9/ –

+0

http://jsfiddle.net/0tc9hb7u/10/ Проблема заключалась в том, что вы добавляете только таблицу на страницу печати (без водяного знака) –

1

Try установка "newWin" как newWinname собственности; используя setTimeout для задержки вызова .print() пока изображения не загружаются в недавно открывшийся window

function printData() { 
    var divToPrint = document.getElementById("printTable"); 
    newWin = window.open("", "newWin"); 
    newWin.document.write(divToPrint.outerHTML); 
    setTimeout(function() { 
     newWin.print(); 
    }, 1000) 
    // newWin.close(); 
} 

$('button').on('click', function() { 
    printData(); 
}) 

jsfiddle http://jsfiddle.net/0tc9hb7u/4/

Смежные вопросы