欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在浏览器中实现复制内容到剪贴板

程序员文章站 2022-06-16 17:01:17
...
前端开发时, 经常有这种功能, 需要把网页中的有些内容复制到剪切板中。

IE: 实现起来有clipboardData 对象可以使用
其他浏览器: document.queryCommandSupported
直接上代码:

copyLink(text) {
    if (window.clipboardData && window.clipboardData.setData) {
      // IE specific code path to prevent textarea being shown while dialog is visible.
      return clipboardData.setData("Text", text);
    } else if (
      document.queryCommandSupported &&
      document.queryCommandSupported("copy")
    ) {
      var textarea = document.createElement("textarea");
      textarea.textContent = text;
      // Prevent scrolling to bottom of page in MS Edge.
      textarea.style.position = "fixed";
      document.body.appendChild(textarea);
      var selection = document.getSelection();
      var range = document.createRange();
      range.selectNode(textarea);
      selection.removeAllRanges();
      selection.addRange(range);
      try {
        // Security exception may be thrown by some browsers.
        return document.execCommand("copy"); 
      } catch (ex) {
        console.warn("Copy to clipboard failed.", ex);
        return false;
      } finally {
        console.log('copy success');
        selection.removeAllRanges();
        document.body.removeChild(textarea);
      }
    }
  },
相关标签: javascript es6