Question

我负责构建到数据库的HTML表单链接。这没问题。

问题是我需要用户能够打印该表单。所以我使用HTML按钮构建了一个“打印按钮”，我在其后面添加了一些JQuery，以便表单格式正确（删除一些边框，背景图像等），然后使用window.print()打印我的表单。 / p>

问题在于：

我的表格长6到7页。

但预计它会在谷歌浏览器上打印正常（所有部分都在不同的页面上）但在IE（最新版本）中，某些字段和某些部分在某些页面上“切成两半”。

我认为问题在于IE如何使用边距和填充。

我还检查了我可以传递给Google上的window.print()的任何参数，想也许它可能会有所帮助但却找不到任何东西。

有人可以提供我可以使用的其他方式或其他功能，因此我的表单在打印时在两个浏览器上看起来都一样吗？或者也许有人可以指出如果我犯了错误。

这是我的代码：

HTML：

<div id="divCodeSecurite">
    <h3 class="Titre">Codes de sécurité des ascenseurs</h3>
        <span class="SHL MixteLeft" id="CodeSecuriteLeft">
            <input type="radio" id="B442007" name="CodeSecurite" value="B44-2007"/>
            <label for="B442007">B44-2007</label>
            <input type="radio" id="B442010" name="CodeSecurite" value="B44-2010"/>
            <label for="B442010">B44-2010</label>
            <input type="radio" id="ASME1712007" name="CodeSecurite" value="ASME 17.1-2007"/>
            <label for="ASME1712007">ASME 17.1-2007</label>
            <input type="radio" id="ASME1712010" name="CodeSecurite" value="ASME 17.1-2010"/>
            <label for="ASME1712010">ASME 17.1-2010</label>
        </span>
        <span class="SHR MixteRight" id="CodeSecuriteRight">
            <label for="CodeSecuriteAutre" class="SHLabel">Autre:</label>
            <input type="text" id="CodeSecuriteAutre" name="CodeSecuriteAutre"/>
        </span>
        </br></br>
        <span class="SHL">
            <label for="VilleInstallation">Ville d'installation:</label>
            <input type="text" id="VilleInstallation" name="VilleInstallation"/>
        </span>
</div>
</br>
<div id="divTypeControl">
    <h3 class="Titre">Type de contôle</h3>
        <span class="SHL">
                <label class="SHLabel">Modèle:</label>
            <input type="radio" id="JHD1000" name="JHD1000" value="JHD-1000"/>
            <label for="JHD1000">JHD-1000 (Avec automate)</label>
        </span>
        <span class="SHR">
            <input type="radio" id="JHD2000" name="JHD2000" value="JHD-2000"/>
            <label for="JHD2000">JHD-2000 (Carte de communication Canbus)</label>
        </span>
</div>
<div class="Spacers divspacer" style="height:440px;"></div>

注意：我只提供了一些代码示例。我有好几次这个长度。 <div class="Spacers divspacer" style="height:440px;"></div>是我过去尝试将所有<div id="">分别放在一个页面上的。{/ p>

CSS：

<style rel="stylesheet" type="text/css">
        .Border
        {
            border: black solid 2px;
        }
        .Titre
        {
            text-align:center;
            background-color:black;
            color:white;
            border: solid black 2px;
        }
        .Spacers
        {
            display:none;
        }
    </style>

注意：我删除了问题不直接需要的代码，如果我删除了需要的内容，请说明我将编辑并添加丢失的代码。

仅供参考：不要寻找.divspacer。它不存在，只在我的JQuery中使用（见下文）。

JQUERY：

function ImprimerForm()
        {
            $("#divBgd").removeClass('Border');//This remove the border
            $("#divValidationEnvois").css('display', 'none');//This hide all the button so they dont print
            $(".divspacer").removeClass('Spacers');//Make spacers visible

            window.print();//Print form

            $("#divBgd").addClass('Border');//Put everything back has it was!!
            $("#divValidationEnvois").css('display', 'block');
            $(".divspacer").addClass('Spacers');
        }

所以要明确：

Probelm：我无法让IE和Chrome以同样的方式打印我的表单。某些字段被剪切为两个，一些<div>位于两个不同的页面上。

寻找：一种方法，让他们在浏览器上以相同的方式打印我的表单或者使用布局进行错误。

我已做过的事情：查找window.print()的参数并尝试添加一些SPACERS（参见上面的代码）。

谢谢大家的帮助！

Answer 1

您应该使用特定于打印的css，而不是尝试使用jQuery隐藏不需要的div。通过使用jQuery隐藏元素，您可能会遇到不必要的副作用。通过添加打印css，您可以指定仅在打印机尝试打印页面时使用的规则集。因此，您的可见css规则中没有添加任何内容。在此CSS中，您可以将某些元素设置为display:none;。

添加IE特定打印css的示例：

<!--[if IE]>
  <link rel="stylesheet" type="text/css" media="print" href="printer.css" />
<![endif]-->

如果要将规则应用于所有浏览器，可以删除if IE / endif标记。

创建打印规则的另一个选择是使用像这样的css @media print部分（以这种方式使用它也适用于所有浏览器，这实际上并不是一个坏主意）：

<style rel="stylesheet" type="text/css">
  @media print {
    #divValidationEnvois {
      display: none;
    }
  }
</style>

Answer 2

                stmt1="SELECT DISTINCT a.ro_code,a.ro_name,b.REGCODE,b.ROLLNUM,b.USERTYPE,b.NAME FROM regionmaster a INNER JOIN security_couser b ON TRIM`enter code here`(a.ro_code) = TRIM(b.REGCODE)  Order By b.REGCODE";
                    rs2 = st.executeQuery(stmt1);
                    out.println("<table border=1 id=cssTable><tr><td><b>Region Code</b></td><td><b>Region Name</b></td><td><b>Roll Number</b></td><td><b>Name</b></td><td><b>User Type</b></td></tr>");
                    String Countrun="";
                    while(rs2.next())
                    {
                        String reg = rs2.getString("REGCODE");
                        String regname=rs2.getString("RO_NAME");
                        String ROLLNUM= rs2.getString("ROLLNUM");
                        String USERTYPE= rs2.getString("USERTYPE");
                        String NAME= rs2.getString("NAME");
                        //Count = rs2.getString("NAME");
                        out.println("<tr><td>"+reg+"</td><td>"+regname+"</td><td>"+ROLLNUM+"</td><td>"+NAME+"</td><td>"+USERTYPE+"</td></tr>");
                    }
                    out.println("</table>");
                    rs2.close();                
           %>
                        <input id ="printbtn" type="button" value="Print" onclick="window.print();" >

使用window.print（）打印HTML表单

2 个答案: