gridview 的打印预览不是居中对齐答案

【问题标题】：Print Preview of gridview is not center alligngridview 的打印预览不是居中对齐
【发布时间】：2016-07-20 02:55:07
【问题描述】：

我正在尝试打印一个 gridview 。为此，我给了一个按钮，然后单击按钮，我调用 javascript 来打印网格。

 function doPrint() {
            var prtContent = document.getElementById('<%= grdHistoricalData.ClientID %>');
           prtContent.border = 0; //set no border here
           var WinPrint = window.open('', '', 'left=50,top=100,border=1px,width=1000,textAlign=center,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
           WinPrint.document.write(prtContent.outerHTML);
           WinPrint.document.close();
           WinPrint.focus();
           WinPrint.print();
           WinPrint.close();
       }

此代码工作正常，但唯一的问题是gridview 数据的打印预览显示左对齐。通常，Girdview 数据显示居中对齐，但当我们打印数据时显示左对齐。 Gridview 正常外观

Gridview的打印预览

请帮助在 Gridview 的打印预览中进行居中对齐。

【问题讨论】：

css 样式表在prtContent 之外。您可以在 GridView 中包含内联样式（丑陋的解决方案）或 open 一个带有所需样式表的小文档并在其中插入（不是 document.write）。
另一种解决方案是添加media=print css 其中display:none 任何你不想要的。事实上，我在不同的页面上都使用了这两种方法。
@AlexKudryashev 如何在 Gridview 中包含内联样式。我尝试在 gridview 中使用 HeaderStyle-HorizontalAlign="Right" 但它不起作用。
第二种方法更可取。不要打开窗户。只需将<style media="print" 添加到页面并将display:none 或/ 和border:none;margin:0 添加到不应打印的所有内容。这需要一些工作。
@vim: 在幕后，如果你查看源代码你可以看到它会将内联 css 注入到表格中。

标签： c# css asp.net gridview

【解决方案1】：

我在不同的情况下使用了几种解决方案。
1) 外部文件。将一个小文件加载到iframe 并从父级调用数据。

<!--print.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Printer version</title>
    <script type="text/javascript">
        window.onload = function () {
            var a = this.parent.getContent();
            document.body.innerHTML = a;
        }
        function printMe() {
            window.print();
        }
    </script>
    <link href="/Styles/print.css" media="print" rel="stylesheet" />
</head>
<body>
</body>
</html>

父文档。

<div id="divPrint" style="display:none;">
<div class="popup">
   <div style="overflow:hidden;">Printer Version
    <div style="float:right;">
        <input type="button" ID="btnPrnClose" value="X" onclick="return closePrint()" />
     </div>
    </div>
        <iframe  id="frPrint" style="width:100%;"></iframe>
    </div>
</div>
</div>

<script type="text/javascript">
        function getContent() {
            return '<div>' + 
'<div class="right no-print" onclick="printMe();" style="cursor: pointer;" title="Print"> \
    <img alt="Print" src="/images/printer.png" /></div>' + document.getElementById('gvOuterContainer').innerHTML+ '</div>';
        }
        function closePrint() {
            document.getElementById('divPrint').style.display = 'none';
        }
        function PrintMessage() {
           document.getElementById('divPrint').style.display = '';
           document.getElementById('frPrint').src = "print.html?a=" + Math.random();//force no-cache
           return false;
        }
</script>

2) 从页面打印。

<style type="text/css" media="print">
    *
    {
        border: none!important;
    }
    .noprint,.popup
    {
        display: none!important;
    }
    #scrollContainer
    {
        width: auto!important;
    }
    .pop-show
    {
        display: table!important;
        left: 0;
        margin-left: 0;
        top: 0;
        width: 100%!important;
        z-index: 100;
    }
/* and so on */
</style>

细节可能不同。

【讨论】：

刚刚得到 gridview.that 的一个属性

【解决方案2】：

终于有答案了，我需要设置gridview属性来解决这个问题

<asp:TemplateField ItemStyle-HorizontalAlign="Center">

【讨论】：