Comment faire un aperçu avant impression et imprimer les boutons de mon formulaire html

Salut, actuellement je travail sur un formulaire html avec quelques champs, que tout ce que je besoin est d'obtenir un aperçu avant impression d'un formulaire avec les réponses et plus tard, il doit être imprimé en cliquant sur un bouton d'impression. Quelqu'un peut-il m'aider avec ceci, je vous serais très reconnaissant si vous pouvez.

InformationsquelleAutor Atchyut Nagabhairava | 2015-03-13
  1. 3

    Voici l'exemple que vous pouvez consulter ce.
    Code Html : 

        <html>
   <body  id="printarea">
        <table class="tble">
            <tr>
                <td>
                    Student Name
                </td>
                <td>
                    John Sypon
                </td>
            </tr>
           <tr>
                <td>
                       Student Rollnumber
                    </td>
                    <td>
                        R001
                    </td>
            </tr>
            <tr>
                <td>
                    Student Address
                </td>
                <td>
                    132 Kane Street Toledo OH 43612.
                </td>
            </tr>
            <tr>
                 <td>
                    <input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
                </td>
                <td>
                    <input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>
                </td>
            </tr>
        </table>
    </body>
    </html>

    Et inclure ce lien css: 

    <link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />

    maintenant imprimer.fichier css :

    @media print /*--This is for Print--*/
{
    .btn
    {
        display: none;
    }
    .tble
    {
        background-color: #CD853F;
        border:1px solid green;
        -webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/

    }
}
@media screen /*--This is for Print Preview Screen--*/
{
    .btn
    {
        display: none;
    }

    .tble
    {
        background-color: #CD853F;
        border:1px solid green;
    }
  }

    et de style.css

    @media screen /*--This is for Screen--*/
{
    .btn
    {
        background-color: #AFAFAF;
        display: block;
    }
    .tble
    {
        background-color: #E5E5E5;
        border: 1px solid #CD853F;
    }
}

    Maintenant inclure ce code javascript :

    <script type="text/javascript">
/*--This JavaScript method for Print command--*/
    function PrintDoc() {
        var toPrint = document.getElementById('printarea');
        var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
        popupWin.document.open();
        popupWin.document.write('<html><title>::Preview::</title><link  type="text/css" href="print.css" /></head><body onload="window.print()">')
        popupWin.document.write(toPrint.innerHTML);
        popupWin.document.write('</html>');
        popupWin.document.close();
    }
/*--This JavaScript method for Print Preview command--*/
    function PrintPreview() {
        var toPrint = document.getElementById('printarea');
        var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
        popupWin.document.open();
        popupWin.document.write('<html><title>::Print Preview::</title><link  type="text/css" href="Print.css" media="screen"/></head><body">')
        popupWin.document.write(toPrint.innerHTML);
        popupWin.document.write('</html>');
        popupWin.document.close();
    }
</script>

    J'espère que cette réponse vous aider!!!

    • Merci beaucoup pour la Réponse.... permettez-moi de donner un essai.... 🙂
    • sa marche, je l'ai essayé dans mon local, testé et posté cette réponse. laissez-moi savoir si vous avez la moindre inquiétude sur ce
    • Mec de son travail génial....
    • Mais j'ai un formulaire avec des champs de texte et les menus déroulants.... Il travaillera pour qui?? je veux dire puis-je obtenir ceux remplis de données en tant que fichier pdf?
    • ya il travaille pour la forme aussi, parce que vous affichez tout à l'intérieur de la balise body, donc tout ce qui est à l'intérieur du corps de la balise, il est visualisé et imprimé ...
    • Son travail pour une charge statique de données.... Mais je ne suis pas en mesure de récupérer les données dans les champs de texte ou d'une liste déroulante..... 🙁
    • ok, alors pour un aperçu dynamique de la forme de données de consulter ce lien : adrian-alexan.blogspot.dans/2009/12/...

    InformationsquelleAutor Utsab Neupane
  2. 1

    Essayer,

    $('button').on('click',function(){
    print();
});

    Pour l'aperçu avant impression, vous pouvez essayer Aperçu avant impression et imprimer séparément à l'aide de HTML, CSS et JavaScript

    • c'est pour l'impression de na?? comment puis-je obtenir aperçu avant impression?
    InformationsquelleAutor Rohan Kumar
  3. 0

    Vous pouvez utiliser la méthode javascript fenêtre.print()

    InformationsquelleAutor prajeesh