I am modifying the following script from here

I am now able to export this table :

 <div class='container'>
      <div id="dvData">
        <table>
          <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
          </tr>
          <tr>
            <td>Row 1 Col 1</td>
            <td>Row 1 Col 2</td>
            <td>Row 1 Col 3 </td>
          </tr>
          <tr>
            <td>Row 2 Col 1</td>
            <td>Row 2 Col 2</td>
            <td>Row 2 Col 3</td>
          </tr>
          <tr>
            <td>Row 3 Col 1</td>
            <td>Row 3 Col 2</td>
            <td>Row 3 Col 3</td>
          </tr>
        </table>
      </div>

by clicking this button :

      <div class='button'>
        <a href="#" id="export" role='button'>Click On This Here Link To Export The Table Data into a CSV File
        </a>
      </div>

If above button is clicked, it will run this script:

          $("#export").click(function(event) {
            var outputFile = '0-test.txt';
            exportTableToCSV.apply(this, [$('#dvData>table'), outputFile]);
          });
        });

And it worked.

Now the aim is to have this table exported and saved/downloaded (without dialog box) every certain defined time/period. In the following script I define every 5 second.

  function save() {
          $('#export').trigger('click');
        }
        setInterval(save, 5000);

However the

$('#export').trigger('click'); 

has no response. Please advise.

complete code

CodePudding user response：

This should work. Instead of triggering the JQuery's click method, you can just use Javascript's click selecting the DOM element using [0].

(see also: How to trigger click event on href element)

$(document).ready(function() {
  function exportTableToCSV($table, filename) {
    var $headers = $table.find('tr:has(th)'),
      $rows = $table.find('tr:has(td)'),
      tmpColDelim = String.fromCharCode(11), // vertical tab character
      tmpRowDelim = String.fromCharCode(0), // null character
      colDelim = ';',
      rowDelim = '\r\n';
    var csv = '';
    //csv  = formatRows($headers.map(grabRow));
    csv  = formatRows($rows.map(grabRow))   '';
    csv  = rowDelim;

    var csvData = 'data:application/csv;charset=utf-8,'   encodeURIComponent(csv);
    $(this)
      .attr({
        'download': filename,
        'href': csvData
        //,'target' : '_blank' //if you want it to open in a new window
      });
    //------------------------------------------------------------
    // Helper Functions 
    //------------------------------------------------------------
    // Format the output so it has the appropriate delimiters
    function formatRows(rows) {
      return rows.get().join(tmpRowDelim)
        .split(tmpRowDelim).join(rowDelim)
        .split(tmpColDelim).join(colDelim);
    }
    // Grab and format a row from the table
    function grabRow(i, row) {
      var $row = $(row);
      //for some reason $cols = $row.find('td') || $row.find('th') won't work...
      var $cols = $row.find('td');
      if (!$cols.length) $cols = $row.find('th');
      return $cols.map(grabCol)
        .get().join(tmpColDelim);
    }
    // Grab and format a column from the table 
    function grabCol(j, col) {
      var $col = $(col),
        $text = $col.text();
      return $text.replace('"', '""'); // escape double quotes
    }
  }


  $("#export").click(function(event) {
    var outputFile = '0-test.txt';
    console.log("clicked");
    exportTableToCSV.apply(this, [$('#dvData>table'), outputFile]);
  });
});

function save() {
  $('#export')[0].click();
}

setInterval(save, 5000);

body {
  font-family: sans-serif;
  font-weight: 300;
  padding-top: 30px;
  color: #666;
}

.container {
  text-align: center;
}

a {
  color: #1C2045;
  font-weight: 350;
}

table {
  font-weight: 300;
  margin: 0px auto;
  border: 1px solid #1C2045;
  padding: 5px;
  color: #666;
}

th,
td {
  border-bottom: 1px solid #dddddd;
  text-align: center;
  margin: 10px;
  padding: 0 10px;
}

hr {
  border: 0;
  border-top: 1px solid #E7C254;
  margin: 20px auto;
  width: 50%;
}

.button {
  background-color: #1C2045;
  color: #E7C254;
  padding: 5px 20px;
  max-width: 300px;
  line-height: 1.5em;
  text-align: center;
  margin: 5px auto;
}

.button a {
  color: #E7C254;
}

.refs {
  display: block;
  margin: auto;
  text-align: left;
  max-width: 500px;
}

.refs .label {
  font-size: 1.4em;
}

.refs>ul {
  margin-top: 10px;
  line-height: 1.5em;
}

<script src="https://github.com/caike/jQuery-Simple-Timer/blob/master/jquery.simple.timer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="jquery-script-menu">
  <div >
    <div  data-minutes-left="0.1"></div>
  </div>
</div>

<div class='container'>
  <div id="dvData">
    <table>
      <tr>
        <th>Column One</th>
        <th>Column Two</th>
        <th>Column Three</th>
      </tr>
      <tr>
        <td>Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3 </td>
      </tr>
      <tr>
        <td>Row 2 Col 1</td>
        <td>Row 2 Col 2</td>
        <td>Row 2 Col 3</td>
      </tr>
      <tr>
        <td>Row 3 Col 1</td>
        <td>Row 3 Col 2</td>
        <td>Row 3 Col 3</td>
      </tr>
    </table>
  </div>
  <br />
  <div class='button'>
    <a href="#" id="export" role='button'>Click On This Here Link To Export The Table Data into a CSV File
        </a>
  </div>



</div>