js 将html元素内的文本或者变量值 复制到 剪切板

推荐使用第二种方法

 

方法一：使用第三方插件：clipboard.js

官方链接：https://clipboardjs.com/

1，直接下载js文件，在script脚本中直接引用

<script src="static/clipboard.min.js"></script>

或者：

2，安装npm包

npm install clipboard --save 

import Clipboard from 'clipboard'

3，复制input中的文本

<input id="input" value="clipboard">

<button class="btn" data-clipboard-target="#input">点击复制</button>

import Clipboard from 'clipboard';

const btnCopy = new Clipboard('btn');

 4，复制变量中的值

<button class="btn" :data-clipboard-text="copyValue">点击复制</button>

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'clipboard';

5, 添加回调函数

// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
 console.info('Action:', e.action); // 动作名称，比如：Action: copy
 console.info('Text:', e.text); // 内容，比如：Text：clipboar
 console.info('Trigger:', e.trigger); // 触发元素：比如：<button class="btn" :data-    
 clipboard-text="copyValue">点击复制</button>
 e.clearSelection(); // 清除选中内容
});
 
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

6，最后可以，用完可以销毁这个库

btn.destroy()

 

方法二：document.execCommand()方法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

• aCommandName ：表示命令名称，比如： copy, cut 等（更多命令见命令）；
• aShowDefaultUI：是否展示用户界面，一般情况下都是 false；
• aValueArgument：有些命令需要额外的参数，一般用不到；

 基本上主流浏览器都能兼容

1，输入框的文本内容复制：

<input id="input" value="copy value">
<button @click="copyJsonToClipboard()">点击复制</button>

 

copyJsonToClipboard() {
   const input = document.querySelector('input')
   input.select()
   if (document.execCommand('copy')) {
      this.$message({
         type: 'success',
         message: '报文已复制到剪切板'
         })
      }
}

 2. 复制变量的值

<button @click="copyJsonToClipboard()">点击复制</button>

copyJsonToClipboard(json) {
   const input = document.createElement('input')
   document.body.appendChild(input)
   input.setAttribute('value', json)
   input.setAttribute('readonly', 'readonly')
   input.select()
   input.setSelectionRange(0, 9999) // 如果select 没有选择到
   if (document.execCommand('copy')) {
      this.$message({
         type: 'success',
         message: '报文已复制到剪切板'
         })
      }
   document.body.removeChild(input)
}

 

付链接：

https://github.com/zenorocha/clipboard.js

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://www.jb51.net/article/135605.htm