复制到剪贴板不适用于 VueJS 中的 Chrome 浏览器

Posted 2023-02-23

【中文标题】复制到剪贴板不适用于 VueJS 中的 Chrome 浏览器

【英文标题】：Copy to clipboard not working on Chrome browser in VueJS

【发布时间】：2021-11-19 16:57:54

【问题描述】：

在我的 VueJS 应用程序中，我有一个组件可以在单击链接时将基本 URL 复制到剪贴板

<a @click="copyURL" ref="mylink">
            <img class="social_icon" src="/images/game/copy-fr.png" 
          /></a>
          <input type="text" class="copyurl_txt" v-model="base" ref="text" />
          <div v-if="flash" v-text="flash"></div>

我的脚本中有以下方法，

copyURL() 
      this.$refs.text.select();
      document.execCommand("copy");
      this.flash = "lien copié dans le presse-papiers";
    ,

这在我的 Firefox 浏览器上运行良好，但在我的 Chrome 上这不会将链接复制到剪贴板...

【问题讨论】：

你可以试试这个navigator.clipboard.writeText(this.$refs.text)w3schools.com/howto/howto_js_copy_clipboard.aspdeveloper.mozilla.org/en-US/docs/Web/API/Clipboard/…

【参考方案1】：

<a @click="copyURL" ref="mylink">
            <img class="social_icon" src="/images/game/copy-fr.png" 
          /></a>

你的方法应该如下，

copyURL() 
            const el = document.createElement('textarea');  
            el.value = window.location.origin;                                 
            el.setAttribute('readonly', '');                
            el.style.position = 'absolute';                     
            el.style.left = '-9999px';                      
            document.body.appendChild(el);                  
            const selected =  document.getSelection().rangeCount > 0  ? document.getSelection().getRangeAt(0) : false;                                    
            el.select();                                    
            document.execCommand('copy');                   
            document.body.removeChild(el);                  
            if (selected)                                  
              document.getSelection().removeAllRanges();    
              document.getSelection().addRange(selected);   
            
            this.flash = "lien copié dans le presse-papiers";
        ,

如果你想使用不同的值而不是基本 url，那么简单的改变

el.value = window.location.origin;

到

el.value = this.link_url; 

或

el.value = "www.yourlink.com";

【参考方案2】：

这是因为 input 值不能以相同的方式选择。这可能是每个浏览器处理方式不同的怪癖之一。那个会发生。我的建议是不要在这里尝试重新发明***。我构建了一个自定义 JS 类，仅用于复制适用于所有主要浏览器（包括 IE11）的文本，但这是一项糟糕的工作。由于版权问题，我什至无法分享。

所以只需使用像 https://github.com/Inndy/vue-clipboard2 这样的包并完成它。

如果这不是一个选项，您必须考虑在运行时创建一个虚拟 DOM，其中包含一个不可见的表，然后您可以自动选择和复制该表。