kdssoftware/clipboard_or_download_table_to_csv.js

## clipboard_or_download_table_to_csv.js
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.js">
    </script>
  </head>
  <body>
    <div class="w3-example">
    <h3>HTML Table Example</h3>
    <div class="w3-white w3-padding notranslate w3-padding-16">
    <table id="customers">
      <tbody><tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody></table>
    </div>
    <a href="#" onclick="export_csv('customers','download');">Download as CSV</a>
    </div>
    <p id="csvData"></p>
    <script type="text/javascript">
      function export_csv(table_id,type) {
      //type kan 'copy' of  'download' zijn
      let filename ='export_'+table_id+'_'+new Date().toLocaleDateString()+'.csv';
      let el = document.getElementById(table_id);
      // Select rows from table_id

      if(type==='download'){
        var rows = document.querySelectorAll('table#' + table_id + ' tr');
        // Construct csv
        var csv = [];
        for (var i = 0; i < rows.length; i++) {
            var row = [], cols = rows[i].querySelectorAll('td, th');
            for (var j = 0; j < cols.length; j++) {
                // Clean innertext to remove multiple spaces and jumpline (break csv)
                var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
                // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
                data = data.replace(/"/g, '""');
                // Push escaped string
                row.push('"' + data + '"');
            }
            csv.push(row.join(';'));
        }
        var csv_string = csv.join('\n');
        // Download it
        var link = document.createElement('a');
        link.style.display = 'none';
        link.setAttribute('target', '_blank');
        link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }else if(type==='copy'){
        var body = document.body, range, sel;
        console.log(el);
        if (document.createRange && window.getSelection) {
            range = document.createRange();
            sel = window.getSelection();
            sel.removeAllRanges();
            console.log(sel,range);
            try {
                range.selectNodeContents(el);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(el);
                sel.addRange(range);
            }
            document.execCommand("copy");

        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
            range.execCommand("Copy");
        }
      }else{
        console.error('Error: verkeerde type voor csv bestand');
      }
  }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.js">
	</script>
	</head>
	<body>
	<div class="w3-example">
	<h3>HTML Table Example</h3>
	<div class="w3-white w3-padding notranslate w3-padding-16">
	<table id="customers">
	<tbody><tr>
	<th>Company</th>
	<th>Contact</th>
	<th>Country</th>
	</tr>
	<tr>
	<td>Alfreds Futterkiste</td>
	<td>Maria Anders</td>
	<td>Germany</td>
	</tr>
	<tr>
	<td>Centro comercial Moctezuma</td>
	<td>Francisco Chang</td>
	<td>Mexico</td>
	</tr>
	<tr>
	<td>Ernst Handel</td>
	<td>Roland Mendel</td>
	<td>Austria</td>
	</tr>
	<tr>
	<td>Island Trading</td>
	<td>Helen Bennett</td>
	<td>UK</td>
	</tr>
	<tr>
	<td>Laughing Bacchus Winecellars</td>
	<td>Yoshi Tannamuri</td>
	<td>Canada</td>
	</tr>
	<tr>
	<td>Magazzini Alimentari Riuniti</td>
	<td>Giovanni Rovelli</td>
	<td>Italy</td>
	</tr>
	</tbody></table>
	</div>
	<a href="#" onclick="export_csv('customers','download');">Download as CSV</a>
	</div>
	<p id="csvData"></p>
	<script type="text/javascript">
	function export_csv(table_id,type) {
	//type kan 'copy' of 'download' zijn
	let filename ='export_'+table_id+'_'+new Date().toLocaleDateString()+'.csv';
	let el = document.getElementById(table_id);
	// Select rows from table_id

	if(type==='download'){
	var rows = document.querySelectorAll('table#' + table_id + ' tr');
	// Construct csv
	var csv = [];
	for (var i = 0; i < rows.length; i++) {
	var row = [], cols = rows[i].querySelectorAll('td, th');
	for (var j = 0; j < cols.length; j++) {
	// Clean innertext to remove multiple spaces and jumpline (break csv)
	var data = cols[j].innerText.replace(/(\r\n\|\n\|\r)/gm, '').replace(/(\s\s)/gm, ' ')
	// Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
	data = data.replace(/"/g, '""');
	// Push escaped string
	row.push('"' + data + '"');
	}
	csv.push(row.join(';'));
	}
	var csv_string = csv.join('\n');
	// Download it
	var link = document.createElement('a');
	link.style.display = 'none';
	link.setAttribute('target', '_blank');
	link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
	link.setAttribute('download', filename);
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	}else if(type==='copy'){
	var body = document.body, range, sel;
	console.log(el);
	if (document.createRange && window.getSelection) {
	range = document.createRange();
	sel = window.getSelection();
	sel.removeAllRanges();
	console.log(sel,range);
	try {
	range.selectNodeContents(el);
	sel.addRange(range);
	} catch (e) {
	range.selectNode(el);
	sel.addRange(range);
	}
	document.execCommand("copy");

	} else if (body.createTextRange) {
	range = body.createTextRange();
	range.moveToElementText(el);
	range.select();
	range.execCommand("Copy");
	}
	}else{
	console.error('Error: verkeerde type voor csv bestand');
	}
	}
	</script>
	</body>
	</html>