Как распечатать содержимое таблицы в документе с помощью jQuery?

Как я могу использовать jQuery для печати только таблицы документа?Как распечатать содержимое таблицы в документе с помощью jQuery?

<!--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-->

Demo

источник

2015-03-06 Suffii

Что вы подразумеваете под «печатью таблицы документа»? – Qianyue

Привет, Qianyue, вот пример того, что я хотел бы сделать http://jsfiddle.net/Behseini/b8khwnf8/ Как вы можете видеть, я просто хотел бы напечатать новый элемент, а не распечатать весь документ. – Suffii

Я до сих пор Не поймите, что вы имеете в виду. Я вижу твою новую скрипку, на самом деле структура таблицы не меняется. Так вы просто хотите удалить стиль? например: https://jsfiddle.net/13nh0xts/3/? – Qianyue

Попробуйте это (demo):

$(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 rel="stylesheet" href="' + stylesheet + '">' + 
      '</head><body>' + $('.table')[0].outerHTML + '</body></html>'); 
     win.document.close(); 
     win.print(); 
     win.close(); 
     return false; 
    }); 
});

источник

2015-03-06 21:50:41 Mottie

Печать только IE, не работающая с хромом –

@TomStickel Попробуйте [виджет для печати] (http://mottie.github.io/tablesorter/docs/example-widget-print.html). – Mottie

Я удивлен, что это тоже не работает. Очень странно. Я тоже нахожусь на домашнем рабочем столе с Chrome, а диалоговое окно с открытым текстом для предварительного просмотра пустое, но показывает верхний и нижний колонтитулы, как и для IE. –

Вы можете попробовать эту функцию. Поместите таблицу в div с уникальным идентификатором, а затем укажите его в 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>

источник

2017-06-13 17:01:27 MelArlo

Как распечатать содержимое таблицы в документе с помощью jQuery?

ответ

Смежные вопросы