Create a button to copy a table and paste into Excel

Labels

This Discussion is public

Notifications

The JavaScript to do this task is well known. It is simply a case of finding how to deliver it into the web page. Options include

  • a view
  • a form
  • a (Gutenberg) content block

In this first implementation I am using a form.

  1. In your view have the tag <table id="tableId">
  2. Create a new form
  3. Add a hidden field to it (this will not be used)
  4. Settings > General >
    1. On Submit > Redirect to URL = ./
    2. Do not store entries
    3. Check Ajax options
  5. Settings > Form Actions
    1. Delete all
  6. Customise HTML
    1. delete form classes
    2. delete before fields
    3. After fields =

script type="text/javascript">
//from https://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
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");
}
alert("Table copied to clipboard. You can now paste it into Excel or another application");
}
</script>

4. Submit Button

<div class="frm_submit">
<input type="button" value="Copy table" onclick="selectElementContents( document.getElementById('tableId') );">
</div>

Reply to this Discussion