Comment Imprimer le Contenu de la Table dans le Document à l'Aide de jQuery?

Comment puis-je utiliser jQuery pour imprimer uniquement le tableau du document?

    <!--panel-->
<div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">New Order
    <button class="btn btn-sm pull-right btn-default" type="submit">Print Item</button>
    </div>

    <div class="panel-body">
        <!--table-->
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
        <!--end of table-->
    </div>
</div>
<!--end of panel-->

Démo

  • Qu'entendez-vous par "imprimer le tableau du document"?
  • Salut Qianyue, voici un exemple de ce que je voudrais faire jsfiddle.net/Behseini/b8khwnf8 Comme vous pouvez le voir, je voudrais simplement imprimer le nouvel élément au lieu d'imprimer le document en entier
  • Je n'ai toujours pas compris ce que tu veux dire. Je vois votre nouveau violon, en fait, la structure de la table ne change pas. Vous voulez simplement supprimer le style? comme ceci : jsfiddle.net/13nh0xts/3 ?
InformationsquelleAutor Suffii | 2015-03-06
  1. 1

    Essayez ceci (démo):

    $(function () {
    $('button[type="submit"]').click(function () {
        var pageTitle = 'Page Title',
            stylesheet = '//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css',
            win = window.open('', 'Print', 'width=500,height=300');
        win.document.write('<html><head><title>' + pageTitle + '</title>' +
            '<link  href="' + stylesheet + '">' +
            '</head><body>' + $('.table')[0].outerHTML + '</body></html>');
        win.document.close();
        win.print();
        win.close();
        return false;
    });
});
    • IE impression seulement , ne fonctionne pas avec chrome
    • Essayez de le imprimer widget.
    • Je suis surpris que ne fonctionne pas non plus, très bizarre, je suis sur le bureau avec le Chrome et le dialogue a engendré l'aperçu avant impression du corps est vide, mais montre un en-tête et pied de page comme l'autre pour IE
    • Doh, je suis désolé... je n'ai corrigé le problème, mais il est actuellement disponible uniquement dans la branche master du dépôt. Je compte sur une nouvelle version très bientôt.
    • github.com/Mottie/tablesorter/tree/gh-pages ?
    • Une nouvelle version est disponible. Essayez la démo de nouveau.

    InformationsquelleAutor Mottie
  2. 0

    Vous pouvez essayer cette fonction. Mettez votre tableau dans un div avec un ID unique de référence dans le JQuery:

    <script>function printDiv() {
                    var divName= "<DIV ID HERE>";

                     var printContents = document.getElementById(divName).innerHTML;
                     var originalContents = document.body.innerHTML;

                     document.body.innerHTML = printContents;

                     window.print();

                     document.body.innerHTML = originalContents;
                }</script>
    InformationsquelleAutor MelArlo