个性化阅读
专注于IT技术分析

如何在JavaScript中实现复制到剪贴板?如何原生实现,有第三方库吗?

如何在JavaScript中实现复制到剪贴板?如何原生实现,有第三方库吗?将文本复制到剪贴板的最佳方法是什么?试过以下方式:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

但是IE显示语法错误,而Firefox抛出unsafeWindow is not defined.

有三种方式可以实现复制到剪贴板:

方式一:Async Clipboard API [navigator.clipboard.writeText]

支持访问使用promise异步访问了,仅仅支持HTTPS的页面。

方式二:document.execCommand(‘copy’)

多数浏览器都支持,访问是同步的,IE会停止JS执行直到交互完成。文本从DOM中读取并放在剪贴板上。

方式三:重写复制事件

该方式运行修改剪贴板上显示的任何复制时间,可以包括纯文本以为的其它格式数据。

实现示例

由于浏览器对新的Async剪贴板API的支持水平,您可能希望回到document.execCommand(‘copy’)方法来获得良好的浏览器覆盖率。下面是一个简单的例子:

function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
  
    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Fallback: Copying text command was ' + msg);
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    }
  
    document.body.removeChild(textArea);
  }
  function copyTextToClipboard(text) {
    if (!navigator.clipboard) {
      fallbackCopyTextToClipboard(text);
      return;
    }
    navigator.clipboard.writeText(text).then(function() {
      console.log('Async: Copying to clipboard was successful!');
    }, function(err) {
      console.error('Async: Could not copy text: ', err);
    });
  }
  
  var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
    copyJaneBtn = document.querySelector('.js-copy-jane-btn');
  
  copyBobBtn.addEventListener('click', function(event) {
    copyTextToClipboard('Bob');
  });
  
  
  copyJaneBtn.addEventListener('click', function(event) {
    copyTextToClipboard('Jane');
  });
赞(0) 打赏
未经允许不得转载:srcmini » 如何在JavaScript中实现复制到剪贴板?如何原生实现,有第三方库吗?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏