Javascript 无法在Safari的剪贴板中保存格式化数据（文本/html）

我想将HTML页面的一部分复制到剪贴板并保留格式

我在谷歌上搜索了一个基于execCommand API（即

document.execCommand（“copy”）

）的解决方案，该解决方案应该可以在所有主要浏览器上根据和运行，因此即使是Safari 10+也应该支持这一点

请参见以下示例，该示例适用于Chrome v.68、Firefox v.61、Edge v.42，但在最新的Safari 11.1.2（13605.3.8）中不适用：

有很多js库（例如：），但大多数解决方案依赖于execCommand API（已经在这里尝试）或选择-即创建一个不可见的文本区域，这在Safari中确实有效，但我丢失了格式

谁知道在狩猎中是否有可能做到呢

<div id="data">
<b>Example HTML data</b>  
</div>

<button>Save to clipboard</button>

$(function() {

    function copyToClipboard(data) {
        function listener(e) {
            e.clipboardData.setData("text/html", data);
            e.clipboardData.setData("text/plain", data);
            e.preventDefault();
        }

        document.addEventListener("copy", listener);
        document.execCommand("copy");
        document.removeEventListener("copy", listener);
    };

    function copyHtmlToClipboard() {
        var data = document.getElementById("data").innerHTML;
        copyToClipboard(data);
    };


    var button = $("button")
    button.on("click", copyHtmlToClipboard)

});

示例HTML数据
保存到剪贴板
$（函数（）{
功能copyToClipboard（数据）{
函数侦听器（e）{
e、 setData（“text/html”，数据）；
e、 设置数据（“文本/普通”，数据）；
e、 预防默认值（）；
}
文件。添加监听器（“副本”，监听器）；
文件。执行命令（“副本”）；
文件。删除监听器（“复制”，监听器）；
};
函数copyHtmlTo剪贴板（）{
var data=document.getElementById（“数据”）.innerHTML；
抄写板（数据）；
};
变量按钮=$（“按钮”）
按钮。打开（“单击”，复制剪贴板）
});

根据答案：

出于安全原因，iOS Safari仅允许 document.execCommand（'copy'）用于

contentEditable

容器

我添加了一些代码来创建div，然后选择其中的所有元素：

看

检查以下答案：

$(function() {

    function selectElementContents(el) {
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    };

    function copyToClipboard(data) {
        function listener(e) {
            e.clipboardData.setData("text/html", data);
            e.clipboardData.setData("text/plain", data);
            e.preventDefault();
        }

        document.addEventListener("copy", listener);
        document.execCommand("copy");
        document.removeEventListener("copy", listener);
    };

    function copyHtmlToClipboard() {
        var dataHtmlElement = document.getElementById("data");

        dataHtmlElement.contentEditable = true;
        dataHtmlElement.readOnly = false;

        selectElementContents(dataHtmlElement);
        copyToClipboard(dataHtmlElement.innerHTML);

        dataHtmlElement.contentEditable = false;
        dataHtmlElement.readOnly = true;

        window.getSelection().removeAllRanges();
    };


    var button = $("button")
    button.on("click", copyHtmlToClipboard)

});