3

我负责构建指向数据库的 HTML 表单链接的任务。这里没有问题。

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

这是问题所在：

我的表格有 6 到 7 页长。

但预计它在 Google Chrome 上打印良好（所有部分都在单独的页面上）但在 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="">放在一页上的方法。

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 中使用（见下文）。

查询：

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');
        }

所以要清楚：

问题：我无法让 IE 和 Chrome 以相同的方式打印我的表单。有些字段被切成两半，有些<div>则在两个不同的页面上。

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

我已经做了什么：寻找参数并window.print()尝试添加一些 SPACERS（参见上面的代码）。

谢谢大家的帮助！

4

2 回答 2

1

与其尝试使用 jQuery 隐藏不需要的 div，不如使用特定于打印的 css。通过使用 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>
于 2013-08-19T14:44:19.393 回答
0 
                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();" >

于 2020-05-21T05:27:39.303 回答