Javascript在Div中使用CSS打印gridview答案

【问题标题】：Javascript Print gridview in Div with CSSJavascript在Div中使用CSS打印gridview
【发布时间】：2018-07-23 16:49:57
【问题描述】：

我正在尝试打印特定的 DIV。标题行很少，并且有一个应用了一些 CSS 的 gridview。经过长时间的搜索，我找到了一种将 div 打印到不同页面的方法，以免失去对主页的关注。问题是gridview的打印没有任何边框，这样就没用了。我想问题是我用于gridview的CSS，但我不知道如何解决这个问题。

这是div

<div id="tabella">
<asp:label font-bold="true" Font-Italic ="true" ID="lbIdStabile" Text="Cod. Stabile: " runat="server"> 
<asp:label Text='<%# Bind("Id")%>' ID ="lbIdStb" runat="server"/></asp:label>
<br />
<asp:label ID="TextBox1" font-bold="true" Text='<%# Bind("indstab")%>' runat="server"/>
<br /> <br />
<asp:GridView ID="GrigliaPdr" CssClass="gridtext align-left table table-bordered" runat="server" RowStyle-Wrap="false" AutoGenerateColumns="False" CellPadding="0" DataKeyNames="Id" DataSourceID="SqlPDR" GridLines="None" AllowPaging="false" AllowSorting="false" AlternatingRowStyle-CssClass="gridAlternate" SelectedRowStyle-CssClass="gridSelect"  showheader ="true">
<Columns>      
<asp:BoundField DataField="Id" Visible="False"/>
<asp:BoundField DataField="piano"  HeaderText="Piano" /> 
</Columns> 
</asp:GridView>
<br />       
<asp:Label ID="Label1" runat="server" Text='<%# Eval("data_odierna", "{0:dd/MM/yyyy HH:mm}") %>'>
</asp:Label>
</div>

这是我的打印功能

function printDiv(divName) {
var prtContent = document.getElementById(divName);
var WinPrint = window.open('');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

这是调用打印功能的按钮

<asp:Button ID="BT_PrintPDR" runat="server" class="win-command"  title="Stampa PDR" cssclass="icon-search" Text="Stampa PDR" type ="button" OnClientClick="printDiv('tabella');" > </asp:Button>

任何帮助将不胜感激

【问题讨论】：

标签： javascript asp.net gridview printing

【解决方案1】：

您应该将对原始 CSS 文件的引用添加到 WinPrint 包含的文档中。您可以通过在 printDiv 函数的第 4 行和第 5 行之间添加以下行来做到这一点：

 var head  = WinPrint.document.getElementsByTagName('head')[0];
 var link  = WinPrint.document.createElement('link');

 link.rel  = 'stylesheet';
 link.type = 'text/css';
 link.href = 'http://yourWebSite/css/yourCSSFile.css';
 link.media = 'all';
 head.appendChild(link);

希望对你有帮助。

编辑 1 这是load CSS files using JavaScript的绝佳答案

【讨论】：

这太棒了 Alfaking。如果你没问题，请accept我的回答。谢谢。

【解决方案2】：

在您的 CSS 中添加用于打印的媒体查询并应用相同的样式来获取边框和其他内容。让我知道它是否适合您！

【讨论】：