如何使用 jQuery 打印文檔中的表格內容？

Question

如何使用 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-->

演示

Answer 1

試試這個（演示）：

$(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;
    });
});

Answer 2

你可以試試這個功能。 將您的表放在具有唯一 ID 的 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>

如何使用 jQuery 打印文檔中的表格內容？

問題描述

2 個解決方案

解決方案1
1 2015-03-06 21:50:41

解決方案2
1 2017-06-13 17:01:27

如何使用 jQuery 打印文檔中的表格內容？

問題描述

2 個解決方案

解決方案1 1 2015-03-06 21:50:41

解決方案2 1 2017-06-13 17:01:27

解決方案1
1 2015-03-06 21:50:41

解決方案2
1 2017-06-13 17:01:27