Question

我正在尝试打印一个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的打印预览中进行居中对齐。

Answer 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>

细节可能有所不同。

Answer 2

最后得到答案，我需要设置解决此问题的gridview属性

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

gridview的打印预览不是中心对齐

2 个答案: