如何使用javascript打印表格？

我發現此代碼以javascript打印。如何使用javascript打印表格？

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

元素ID「printTable」是，我想打印可惜只打印出表的內容，而不是表的樣式表的ID。我只想在它上面有邊框，以便在打印中閱讀更容易。誰能幫我？謝謝你。

來源

2014-01-27 Paul

正如dimshik在他的回答中所述，當您打開一個新窗口時 - 您沒有攜帶主頁上的任何CSS或JavaScript文件，它就像一個空的新實例/窗口。所以這就是爲什麼你的桌子樣式很裸露。你需要添加CSS樣式。 – MackieeE

那麼我如何將css文件附加到新窗口？我嘗試了dimshiks的方法，但我得到了厚厚的邊界。 – Paul

這是因爲他使用'border =「1」'屬性來應用標準的HTML邊框，儘管這是一種舊的和非標準化的方式來應用HTML4-5的邊框（畢竟，它是隻是一個簡單的例子）。您可以：將樣式表注入新窗口的頭部，或將內聯樣式添加到表格中。 – MackieeE

這是你的代碼在一個jsfiddle的例子。我測試過了，看起來很好。

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

我用一個簡單的表，也許你缺少這是用JavaScript創建新頁面上的一些CSS。

<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

這裏有這個老式的桌子造型工具:) [Table Style]（http://www.somacon.com/p141.php） – dimshik

我總是尊重加入jiffdle鏈接的人 – danielad

你也可以使用一個jQuery插件做

jQuery PrintPage plugin

Demo

來源

2014-01-27 08:53:45

OP清楚地說：'使用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打印表格？

回答

相關問題