I was wondering if anybody knows how to select using js the complete table, so that the user can right-click on the selection, copy it to the clipboard and then paste it on Excel. If you select the table manually, the process works perfectly. But sometimes, if the table height is a few times larger than the screen, selecting it dragging the mouse gets tedious. So, I want to give the users the possibility to click on a "select the whole table" button and everything gets ready to be copied.
Any ideas?
Here's how to copy your table to clipboard: Click to select the Table on Piktochart. With your keyboard shortcut, use CTRL+C to copy the table.
Clipboard is based on the EventTarget interface, and includes its methods. read() Requests arbitrary data (such as images) from the clipboard, returning a Promise that resolves with an array of ClipboardItem objects containing the clipboard's contents. readText()
Use writeText() to copy text into the clipboard. Use readText() to paste the text. Make sure you have given browser permissions for Clipboard to avoid Promise rejections.
Yes. It's not too tricky, and the following will work in all mainstream browsers (including IE 6, and indeed 5):
(Updated 7 September 2012 after Jukka Korpela's comment pointing out that the previous version didn't work in IE 9 standards mode)
Demo: http://jsfiddle.net/timdown/hGkGp/749/
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); } } else if (body.createTextRange) { range = body.createTextRange(); range.moveToElementText(el); range.select(); } }
<table id="tableId" border="1"> <thead> <tr><th>Heading 1</th><th>Heading 2</th></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> </tbody> </table> <input type="button" value="select table" onclick="selectElementContents( document.getElementById('tableId') );">
Just to make the code proposed by Tim Down more complete, allowing de selected content to be automatically copied to clipboard:
<script type="text/javascript"> 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"); } } </script> <table id="tableId"> <thead> <tr><th>Heading</th><th>Heading</th></tr> </thead> <tbody> <tr><td>cell</td><td>cell</td></tr> </tbody> </table> <input type="button" value="select table" onclick="selectElementContents( document.getElementById('tableId') );">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With