0

I have created a random table and I've been trying to export it as an excel, csv, pdf, and to be able to copy and print the table. I'm able to do every single thing except export to excel and I'm not sure what's the file that I forgot to add. Here's my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.dataTables.js" type="text/javascript"></script>
  <script src="dataTables.buttons.js" type="text/javascript"></script>
  <script src="buttons.flash.min.js" type="text/javascript"></script>
  <script src="buttons.html5.min.js" type="text/javascript"></script>
  <script src="buttons.print.min.js" type="text/javascript"></script>
  <script src="flashExport.swf" type="text/javascript"></script>
  <script src="dataTables.buttons.js" type="text/javascript"></script>

  <script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"></script>


  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>

</head>

<body>
  <table id="demoTable">
    <thead>
      <tr>
        <th> Name</th>
        <th> Program</th>
        <th> Age</th>
        <th> Homecity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> A</td>
        <td> Computer Engineering</td>
        <td> 20 Years old</td>
        <td> Mississauga</td>
      </tr>
      <tr>
        <td> B</td>
        <td> Computer Engineering</td>
        <td> 19 Years old</td>
        <td> Vancouver</td>
      </tr>
      <tr>
        <td> C</td>
        <td> Computer Engineering</td>
        <td> 19 Years old</td>
        <td> Vancouver</td>
      </tr>
      <tr>
        <td> D</td>
        <td> Computer Engineering</td>
        <td> 19 years old</td>
        <td> Ottawa</td>

      </tr>
    </tbody>
  </table>
</body>


<script type="text/javascript">
  $(function() {
    $("#demoTable").DataTable({
      dom: 'Bfrtip',
      buttons: ['csv', 'excel', 'pdf', 'copy', 'print']
    });
  })
</script>

Thank you in advance for helping me.

freedomn-m
  • 27,664
  • 8
  • 35
  • 57

1 Answers1

0

It's possible that the jQuery script tag outside of the <html> is causing issues with other resources loading. You also want to make sure the <script> containing the DataTable() initialization/configuration is inside the <body> tag or loaded as separate file within the <body> or <head>. I'd make sure by inspecting source on your instance that you can see each and every file being successfully loaded from your local file system/server.

Also, I'd re-evaluate the <script> resources with file type .swf, the working example is only using .js resources. If you need to include .swf files you would likely need to embed them. See this question.

I've created a working example here including exporting to excel.

Hopefully that helps!

Community
  • 1
  • 1
Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91
  • According version control, the script tag is not outside the html tag ;-). It is outside from body and head tag. – Reporter May 05 '17 at 14:16
  • What version control? There is a ` – Alexander Staroselsky May 05 '17 at 14:19
  • Aah, I oversaw the first line ;-). I saw only the last lines, were some javascript code placed. – Reporter May 05 '17 at 14:21
  • Thank you very much! I'm still new to this (started yesterday). The corrected code is perfect and honestly I wasn't sure how to add the css. This example is perfect. Thanks! – Michel Georges Najarian May 05 '17 at 14:33