Как экспортировать PDF с таблицами данных с помощью пользовательских кнопок - PullRequest
Новая
       19

Как экспортировать PDF с таблицами данных с помощью пользовательских кнопок

0 голосов
/ 14 сентября 2018

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

enter image description here

Я попробовал код ниже, но когда я нажимаю кнопку PDF. нет экспорта в формате PDF. Спасибо

Кнопка HTML: 

<input type="button" name="search" id="search" value="Search" class="btn btn-info" ><input type="button" name="print" id="print" value="Print" class="btn btn-info" ><input type="button" name="pdf" id="pdf" value="PDF" class="btn btn-info" >

Javascript Datatables: 

$(document).ready(function(){
$("#pdf").on("click", function() {
    table.button( '.buttons-pdf' ).trigger();
}); 


 $('.input-daterange').datepicker({
  todayBtn:'linked',
  format: "yyyy-mm-dd",
  autoclose: true
 });

 fetch_data('no');

 function fetch_data(is_date_search, start_date='', end_date='')
 {
  var dataTable = $('#order_data').DataTable({
     dom: 'Bfrtip',
        buttons: [
             { 
            extend: 'pdf',
        }
        ], 
   "processing" : true,
   "serverSide" : true,
   bFilter:false,
   "ajax" : {
    url:"fetch.php",
    type:"POST",
    data:{
     is_date_search:is_date_search, start_date:start_date, end_date:end_date
    }, 
   }
  });
 }


 $('#search').click(function(){
  var start_date = $('#start_date').val();
  var end_date = $('#end_date').val();
  if(start_date != '' && end_date !='')
  {
   $('#order_data').DataTable().destroy();
   fetch_data('yes', start_date, end_date);
    //$("#tabel").show(); 
    document.getElementById('tabel').style.display = "block";  
  }
  else
  {
   alert("Both Date is Required");
  }
 }); 

});

Ошибка с консоли: enter image description here

1 Ответ

0 голосов
/ 14 сентября 2018

Этот код работает для меня. Пожалуйста, измените src для файла jquery и протестируйте его один раз. 

<!DOCTYPE html>
    <head>
        <title>abc</title>
    </head>

    <body>
        <div>
            <table id="example">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Features</th>
                        <th>Report</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>a</td><td>b</td><td>c</td></tr>
                </tbody>
            </table>
        </div>
    </body>
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script type="text/javascript">
        $('#example').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'csv', 'excel', 'pdf','print'
            ]
        });
    </script>

</html>

Посмотрите, импортировали ли вы все файлы, упомянутые выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...