Выберите полную таблицу с Javascript (для копирования в буфер обмена)
Мне было интересно, знает ли кто-нибудь, как выбрать с помощью js полную таблицу, чтобы пользователь мог щелкнуть правой кнопкой мыши на выделении, скопировать его в буфер обмена, а затем вставить его в Excel. Если вы выбираете таблицу вручную, процесс работает отлично. Но иногда, если высота стола в несколько раз больше, чем экран, Выбор его перетаскивания мышью становится утомительным. Итак, я хочу дать пользователям возможность нажать на кнопку" Выбрать всю таблицу", и все будет готово скопированный.
какие идеи?
4 ответа:
да. Это не слишком сложно, и следующее будет работать во всех основных браузерах (включая IE 6, и действительно 5):
(Обновлено 7 сентября 2012 года после комментария Юкки Корпелы, указывающего, что предыдущая версия не работала в режиме стандартов IE 9)
демо: http://jsfiddle.net/timdown/hGkGp/749/
код:
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') );">
Я получил его для работы в IE9, наконец, с помощью следующего скрипта
Примечание: он не работает с таблицами html. Это должен быть DIV. Так что просто положите обертку DIV вокруг стола, который вам нужно выбрать!
сначала я немного изменил код кнопки HTML:
<input type="button" value="Mark table" onclick="SelectContent('table1');">
затем изменил javascript на:
function SelectContent (el) { var elemToSelect = document.getElementById (el); if (window.getSelection) { // all browsers, except IE before version 9 var selection = window.getSelection (); var rangeToSelect = document.createRange (); rangeToSelect.selectNodeContents (elemToSelect); selection.removeAllRanges (); selection.addRange (rangeToSelect); } else // Internet Explorer before version 9 if (document.body.createTextRange) { // Internet Explorer var rangeToSelect = document.body.createTextRange (); rangeToSelect.moveToElementText (elemToSelect); rangeToSelect.select (); } else if (document.createRange && window.getSelection) { range = document.createRange(); range.selectNodeContents(el); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }
просто чтобы сделать код, предложенный Тимом Дауном, более полным, позволяя автоматически копировать выбранный контент в буфер обмена:
<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') );">
вот что я использовал. Он также делает команду копирования, поэтому все, что вам нужно сделать, это использовать команду вставки в документе, в который вы хотите поместить его. В основном вы переносите содержимое, которое хотите скопировать в div, захватите его с помощью innerHTML и скопируйте его в буфер обмена. Я не тестировал его на всех браузерах, но он работает в Chrome, Safari, Firefox.
<div id="copycontent"> <table> </table> </div> <input type="button" value="Mark table" onclick="SelectContent('copycontent');"> <script type="text/javascript"> function SelectContent (el) { var aux = document.createElement("div"); aux.setAttribute("contentEditable", true); aux.innerHTML = document.getElementById("main").innerHTML; aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); document.body.appendChild(aux); aux.focus(); document.execCommand("copy"); document.body.removeChild(aux); } </script>