3

私は、DB への 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>

注: コードのサンプルのみを掲載しました。私はこの長さの時間を数回持っています。これは、私がすべてを 1 ページ<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 でのみ使用されます (以下を参照)。

Jクエリ:

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 でフォームを同じように印刷できません。一部のフィールドは 2 つにカットされており、一部<div>は 2 つの異なるページにあります。

探しているもの: 両方のブラウザーで同じ方法でフォームを印刷する方法、またはレイアウトで作成されたエラー。

私がすでに行ったこと: AND のパラメーターを探します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 タグを削除できます。

印刷ルールを作成する別のオプションは、次の@media printように css セクションを使用することです (この方法で使用すると、すべてのブラウザーにも適用されますが、これは実際には悪い考えではありません)。

<style rel="stylesheet" type="text/css">
  @media print {
    #divValidationEnvois {
      display: none;
    }
  }
</style>
于 2013-08-19T14:44:19.393 に答える