Как распечатать таблицу с помощью javascript?

Я нашел этот код для печати в javascript.Как распечатать таблицу с помощью javascript?

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

элемент ID «printTable» является идентификатором таблицы, которую я хочу напечатать, но, к сожалению, он печатает только содержимое таблицы, а не стиль таблицы. Я просто хочу иметь границы на нем, чтобы его легче было читать в печати. Может кто-нибудь мне помочь? Спасибо заранее.

источник

2014-01-27 Paul

Как сказал в своем ответе Димшик, когда вы открываете новое окно - вы не несёте какие-либо файлы CSS или JavaScript, которые у вас были на главной странице, это похоже на пустой новый экземпляр/окно. Вот почему ваши стили таблиц довольно голые; вам нужно будет добавить стили CSS. – MackieeE

, так как я могу приложить файлы css для переноса в новое окно? я пытался использовать dimshiks, но у меня были толстые границы. – Paul

это потому, что он применяет стандартные границы HTML с атрибутом 'border =" 1 ", хотя это старый и нестандартный способ применения границ с HTML4-5 (Afterall, это было просто простой пример). Вы можете либо: вставить таблицу стилей в голову нового окна, либо добавить встроенные стили в таблицу. – MackieeE

Вот ваш код в примере jsfiddle. Я тестировал его, и все выглядит отлично.

http://jsfiddle.net/dimshik/9DbEP/4/

Я использовал простую таблицу, может быть, вам не хватает какой-то CSS на новую страницу, которая была создана с помощью JavaScript.

<table border="1" cellpadding="3" id="printTable"> 
    <tbody><tr> 
     <th>First Name</th> 
     <th>Last Name</th>  
     <th>Points</th> 
    </tr> 
    <tr> 
     <td>Jill</td> 
     <td>Smith</td>  
     <td>50</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Jackson</td>   
     <td>94</td> 
    </tr> 
    <tr> 
     <td>John</td> 
     <td>Doe</td>   
     <td>80</td> 
    </tr> 
    <tr> 
     <td>Adam</td> 
     <td>Johnson</td>   
     <td>67</td> 
    </tr> 
</tbody></table>

источник

2014-01-27 08:44:51 dimshik

спасибо. Я пытался и работал, но как сделать границы более тонкими? – Paul

есть этот инструмент oldschool для стилизации стола :) [Стиль стола] (http://www.somacon.com/p141.php) – dimshik

У меня всегда есть уважение к rpeople, которые добавляют ссылки jiffdle – danielad

Вы также можете использовать плагин JQuery, чтобы сделать это

jQuery PrintPage plugin

Demo

источник

2014-01-27 08:53:45

OP четко говорит: 'print table используя javascript?' –

его ОК. его просто дополнительный вариант –

Один нахальный решение:

function printDiv(divID) { 
     //Get the HTML of div 
     var divElements = document.getElementById(divID).innerHTML; 
     //Get the HTML of whole page 
     var oldPage = document.body.innerHTML; 
     //Reset the page's HTML with div's HTML only 
     document.body.innerHTML = 
      "<html><head><title></title></head><body>" + 
      divElements + "</body>"; 
     //Print Page 
     window.print(); 
     //Restore orignal HTML 
     document.body.innerHTML = oldPage; 

    }

HTML:

<form id="form1" runat="server"> 
    <div id="printablediv" style="width: 100%; background-color: Blue; height: 200px"> 
     Print me I am in 1st Div 
    </div> 
    <div id="donotprintdiv" style="width: 100%; background-color: Gray; height: 200px"> 
     I am not going to print 
    </div> 
    <input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" /> 
</form>

источник

2014-01-27 08:58:16

Как распечатать таблицу с помощью javascript?

ответ

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