Create a button to copy a table and paste into Excel

Est. Reading: 1 minute
By: jamesbayley
Created: 09/21/2018
Category:
Difficulty: Advanced

Create a button to copy a table and paste into Excel

×Warning: This tutorial was created 2283 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

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 =
//from https://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard
<script>
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>

Leave a Reply

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crosschevron-leftchevron-rightarrow-right