1.需要引入库:clipboard.min.js cdn地址:https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js
2.代码demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<body>
<span id="ttt">1234567654321</span>
<button type="button" id="btn_Share" onclick="test('#btn_Share')">
copy
</button>
</body>
<script>
function test(element) {
var clipboard = new ClipboardJS(element, { //绑定元素id
text: function () {
var str = document.getElementById("ttt").innerText;
return str;
},
});
clipboard.on("success", function (e) {
alert("复制成功");
});
clipboard.on("error", function (e) {
alert(e);
});
}
</script>
</html>
下载文件:
downLoad(str: string,name: string) {//str为下载的文本内容 name为文件名
let export_blob = new Blob([str]);
let save_link = document.createElement("a");
save_link.href = window.URL.createObjectURL(export_blob);
save_link.download = name + ".txt";
let ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0, null);
save_link.dispatchEvent(ev);
},
加二维码canvas:
https://gera2ld.github.io/qrcanvas/examples/#pure-color
原生的做法:
document.getElementById('myButton').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('你好,Alice!');
console.log('文本已复制到粘贴板');
} catch (err) {
console.error('无法复制文本: ', err);
}
});