Выберите полную таблицу с Javascript (для копирования в буфер обмена)
Мне было интересно, знает ли кто-нибудь, как выбрать с помощью js полную таблицу, чтобы пользователь мог щелкнуть правой кнопкой мыши по выбору, скопировать его в буфер обмена, а затем вставить его в Excel. Если вы выбираете таблицу вручную, процесс работает отлично. Но иногда, если высота стола в несколько раз больше экрана, выбор его перетаскиванием мыши становится утомительным. Итак, я хочу дать пользователям возможность нажать на кнопку" Выбрать всю таблицу", и все будет готово скопированный.
какие идеи?
4 ответов
да. Это не слишком сложно, и следующее будет работать во всех основных браузерах (включая IE 6, и действительно 5):
(Обновлено 7 сентября 2012 года после комментария Jukka Korpela, указывающего, что предыдущая версия не работала в режиме стандартов 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') );">
вот что я использовал. Он также делает команду copy, поэтому все, что вам нужно сделать, это использовать команду paste в документе, в который вы хотите поместить его. В основном вы обертываете контент, который хотите скопировать в 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>