Question

无法使用border和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

请建议..

Thnks ..

Answer 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

Answer 2

在jquery中尝试追加方法

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

如何使用div内容

2 个答案: