gpt4 book ai didi

javascript将所有样式的元素复制到剪贴板

转载 作者:行者123 更新时间:2023-11-30 11:24:25 25 4
gpt4 key购买 nike

我正在尝试将一个 div 复制到剪贴板。 div 有一些样式,包括背景。我已经制作了一个脚本来将 div 复制到剪贴板,但我不知道如何做背景。

我看过这个,但我不记得是怎么做到的。

如有任何帮助,我们将不胜感激。


据我所知:

function executeCopy(text) {
var copyDiv = document.createElement('div');
copyDiv.contentEditable = true;
document.body.appendChild(copyDiv);
copyDiv.innerHTML = text;
copyDiv.unselectable = "off";
copyDiv.focus();
document.execCommand('SelectAll');
document.execCommand("Copy", false, null);
document.body.removeChild(copyDiv);
}
#foo {
background-color: red;
font-family: cursive;
}
<div id="foo">Test</div>
<button onclick="executeCopy(document.getElementById('foo').innerHTML);">Copy</button>

最佳答案

您可以尝试以下 fiddle 。它适用于所有文本样式,并且可以与 MS Word 和 Pages 互操作(我刚刚测试过)。

代码非常简单,所以我不会深入研究它,但如果您有任何问题,请随时向我提出。 :)

const copyWithStyle = ( element ) => {

const doc = document;
const text = doc.getElementById( element );
let range;
let selection;

if( doc.body.createTextRange ) {

range = doc.body.createTextRange();
range.moveToElement( text );
range.select();

} else if ( window.getSelection ) {

selection = window.getSelection();

range = doc.createRange();
range.selectNodeContents( text );

selection.removeAllRanges();
selection.addRange( range );

}

document.execCommand( 'copy' );
window.getSelection().removeAllRanges();
document.getElementById( 'clickMe' ).value = 'Copied to clipboard!';

}

https://jsfiddle.net/aypdg3kL/

来自 JSFiddle 中的例子

HTML

<div id="text" style="color:red">
<i>Hello</i> world!
</div>
<input id="btn" onclick="CopyToClipboard('text')" type="button" value="Copy" />

JS

function CopyToClipboard(element) {

var doc = document
, text = doc.getElementById(element)
, range, selection;

if (doc.body.createTextRange)
{
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
}

else if (window.getSelection)
{
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById("btn").value="Copied";
}

关于javascript将所有样式的元素复制到剪贴板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48554043/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com