javascript將元素復制到具有所有樣式的剪貼板

Question

我正在嘗試將 div 復制到剪貼板。 div 有幾種樣式，包括background 。 我已經制作了一個腳本來將 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>

Answer 1

您可以嘗試以下小提琴。 它適用於所有文本樣式，並且可以與 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";
}