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