如何打印带有 div 内容的数据表答案

【问题标题】：How to print Data-table with div content如何打印带有 div 内容的数据表
【发布时间】：2016-08-08 09:50:10
【问题描述】：

无法打印带有边框和 div 内容的数据表。我已经尝试过数据表打印插件，但它只能打印数据表..

HTML：

<div class="col-md-12 col-xs-12 col-sm-12 panel panel-default" id="testreportTable">
        <button class="btn btn-default" id="btnPrint">Print</button>
        <div class="col-md-12 col-xs-12 col-sm-12 text-center" >
            <h4>Stack OverFlow Test</h4>
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12">
            <h5><b>Test Page</b></h5>
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 table-responsive">
            <table class="table table-striped table-bordered table-responsive" id="TestReportTable">
                 <thead>
                      <tr>
                         <th>Name</th>
                         <th>Location</th>
                         <th>Duration</th>
                         <th>Remarks</th>
                      </tr>
                </thead>
          </table>
      </div>
    </div>

JavaScript :

var data = [
{name:"Fiat", location:"Mumbai", duration:"2 Hours",remarks:"Ready"},         {name:"Tata", location:"Mumbai", duration:"3 Hours",remarks:"Ready"}
                ];

 var ops_table = $('#TestReportTable').dataTable(
             {
                 "bPaginate": false,
                 "bLengthChange": false,
                 "bFilter":true,
                 "bInfo" : false,
                 "oLanguage": {
                       "sSearch": ""
                   },
                 "aoColumns":[{"bSearchable": true},{"bSearchable":true},{"bSearchable":true},{"bSearchable":true}]
             });

     var dataArray = [];
     $.each(data,function(i,dataFirst)
{dataArray.push([dataFirst.name,dataFirst.location,dataFirst.duration,dataFirst.remarks]);
     })

      ops_table.fnClearTable();
        ops_table.fnAddData(dataArray);

    function getPrint(){
        var divToPrint=$('#testreportTable');
        var newWin=window.open('','Print-Window');
        newWin.document.open();
        newWin.$(document.body).append('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
        newWin.document.close();
        setTimeout(function(){newWin.close();},10);
    }


    $('#btnPrint').on('click',function(){
        getPrint()
    })

请参考这个小提琴..

Fiddle

请建议..

谢谢..

【问题讨论】：

“你能告诉我怎么做吗？”，也许 - 如果你能告诉我们你想做什么。 “print Data-table with div content”是什么意思？ document.write()sn-ps 与该问题有何关系，此外我们可以看到您（也许）包含一些 dataTables 插件？
这多个插件添加到一个 js 文件中。这就是为什么我在 document.write() 中编写这段代码
是的，但是包含插件文件是一个基本的先决条件；你永远不会问一个 jQuery 问题，只说你已经包含了 jQuery，但是把有趣和相关的代码留在外面，对吗？ :) 我无意苛刻，只是想增加您获得合格答案的机会。如果不准确说明您要做什么，我担心您的问题最终会无人回答。即使它得到了回答，它对未来的读者也毫无用处，对人们无法识别的未指定问题的答案也不会引起太多关注。
请建议.. @davidkonrad

标签： jquery html datatables

【解决方案1】：

HTML:-

<div class="col-md-12 col-xs-12 col-sm-12 panel panel-default" id="testreportTable">
        <button class="btn btn-default" id="btnPrint">Print</button>
<div id="corporateInfoId">        
<div class="col-md-12 col-xs-12 col-sm-12 text-center" >
            <h4>Stack OverFlow Test</h4>
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12">
            <h5><b>Test Page</b></h5>
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 table-responsive">
            <table class="table table-striped table-bordered table-responsive" id="TestReportTable">
                 <thead>
                      <tr>
                         <th>Name</th>
                         <th>Location</th>
                         <th>Duration</th>
                         <th>Remarks</th>
                      </tr>
                </thead>
          </table>
      </div>
    </div>
</div>

jQuery:-

var data = [
    {name:"Fiat", location:"Mumbai", duration:"2 Hours",remarks:"Ready"},         {name:"Tata", location:"Mumbai", duration:"3 Hours",remarks:"Ready"}
                    ];

     var ops_table = $('#TestReportTable').dataTable(
                 {
                     "bPaginate": false,
                     "bLengthChange": false,
                     "bFilter":true,
                     "bInfo" : false,
                     "oLanguage": {
                           "sSearch": ""
                       },
                     "aoColumns":[{"bSearchable": true},{"bSearchable":true},{"bSearchable":true},{"bSearchable":true}]
                 });

         var dataArray = [];
         $.each(data,function(i,dataFirst)
    {dataArray.push([dataFirst.name,dataFirst.location,dataFirst.duration,dataFirst.remarks]);
         })

          ops_table.fnClearTable();
            ops_table.fnAddData(dataArray);

        function getPrint(){
            var divToPrint=$('#testreportTable');
var htmlToPrint = '' +
    '<style type="text/css">' +
    'table th, table td {' +
    'border:1px solid #000;' +
    'padding;0.5em;' +
    '}' +
    '.pagination{' +
    'display:none;' +
    '}' +
    '.dataTables_filter{' +
    'display:none;' +
    '}' +
    '</style>';
    var oSettings = ops_table.fnSettings();
    oSettings._iDisplayLength = -1;
    ops_table.fnDraw();
            var newWin=window.open('','Print-Window');
            newWin.document.open();
            newWin.$(document.body).append('<html><body onload="window.print()">'+htmlToPrint+divToPrint.innerHTML+'</body></html>');
oSettings._iDisplayLength = 10;
    ops_table.fnDraw();
            newWin.document.close();
            setTimeout(function(){newWin.close();},10);
        }


        $('#btnPrint').on('click',function(){
            getPrint()
        })

Fiddle

【讨论】：

【解决方案2】：

在 jquery 中尝试 append 方法

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    $("div").append("<table><tr><td></td></tr></table>");


<body>

<div></div>

</body>

【讨论】：

请问：您认为他为什么应该尝试...？