Copy HTML Table Tag With Format/Style to Clipboard

Question

I am trying the copy HTML table element tag with format. I have followed these Stackoverflow answers but still only text is being copy without format.

https://stackoverflow.com/a/38821410 https://stackoverflow.com/a/30566157

Here is my javascript code:

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();
    document.execCommand("Copy");
  }
}

This is Copy Table Button

@component('layouts.components.custom-button',
                              [
                              'id' => 'copyTable',
                              'class' => 'ml-auto m-r-10',
                              'tooltip' => 'Copy Table',
                              'position' => 'top right',
                              'target' => '',
                              'clipboard_target' => '#JoineeTrackerTable',
                              'toggle' => '',
                              'action' => '',
                              'icon' => 'file_copy',
                              ])
                            @endcomponent

This is Table Code. I am appending Table body content dynamically after constructing it from PHP

<table id="JoineeTrackerTable" class="table table-responsive">
                    <thead>
                    <tr class="">
                        <th class="tablet-hide font-weight-bold c_id">No.</th>
                        <th>Full Name</th>
                        <th>Mobile Number</th>
                        <th class="">Designation</th>
                        <th class="">Recruiter</th>
                        <th class="">Country (Recruiter)</th>
                        <th class="">Organization</th>
                        <th class="">Process Type</th>
                        <th class="">Company Name</th>
                        <th class="">City/Company Site</th>
                        <th class="">DOI</th>
                        <th class="">DOJ</th>
                        <th class="">Joinee Status</th>
                        <th class="">Job Type</th>
                        <th class="">Comments</th>
                    </tr>
                    </thead>

                    <tbody id="joinee-tracker-list">

                    </tbody>
                </table>

Any help would be appreciated.

Where do you paste this html to test? if the context is text like textarea you will not have html. — jcubic, Sep 08 '19 at 16:55
I pasted the html in onenote as well as Gmail composer but its not working anywhere — fahad shaikh, Sep 08 '19 at 17:12
Try Word document of html with `contenteditable`. I don't think that gmail accept html content like this. Did you ever pasted the something and had formatted output in those apps? I never use onenote and with gmail I only pasted normal text. — jcubic, Sep 08 '19 at 17:16
Its not working in word too. When I paste some code in gmail, it accepts the format/style of editor(in my case phpstorm). — fahad shaikh, Sep 08 '19 at 17:33
I've just checked your code in console of this page: `selectElementContents(document.querySelector('.prettyprint'))` (copy your code) and it works in LIbreOffice Writer. Not sure about Gmail or Onenote, I'm not able to test. — jcubic, Sep 11 '19 at 07:49
I found some Jsfiddle and codepen code which are working in onenote when I copied the table but when I used exactly same code in my project its not working anymore. — fahad shaikh, Sep 15 '19 at 13:17
You probably have other errors in your code, not related to original question. You need to learn how to debug this and if you found why it's happening if you don't how to fix it you will need to show relevant code. This solution works. — jcubic, Sep 15 '19 at 20:33
But what could be other errors which causing my code to copy the table without format? — fahad shaikh, Sep 17 '19 at 02:45
Think, If fiddle works and your code don't then problem is with your code not with solution. — jcubic, Sep 17 '19 at 07:12

score 0 · Answer 1 · answered Sep 08 '19 at 19:57

If you need to copy a HTML element to clipboard - for other than web-page (browser environment) use - I suggest you try the IE's F12 tools...

Move to the "DOM Explorer" tab
Select the element of interest
Right-click to open the fly command menu, and
Click the "Copy element with styles".

The Last time I used this command (in any browser environment at all) was 2005, and it was IE so I wouldn't know if other browsers provide this option in their most current dev tools or not. I can only guarantee its availability on IE F12.

Otherwise, this superficially simple and seemingly easy task, quickly becomes a very complicated piece of work.

Alternatively, triggering a document edit-mode: ON, might also provide your copy-command targeting the selected element with style formatting too.

Using JavaScript to programmatically copy the content and their corresponding styles by iterating and examining current styles of each and every child nesting below, is a torment that transcends the benefit. But doable!

Copy HTML Table Tag With Format/Style to Clipboard

1 Answers1