2021-11-17 js 实现复制功能（附带获取剪贴板内容）

2021-11-17
ie浏览器api：window.clipboardData，举例：
if (window.clipboardData.setData("text",'666')) {
console.log("复制成功");
} else {
console.log("复制失败");
}
注意：clipboardData只存在ie浏览器，谷歌火狐等浏览器没有此方法（网上说的，实测谷歌没有）
另一种方法：
安装一个插件【vue-clipboard】，用插件提供的api来复制：
cnpm i vue-clipboard2 -S 安装插件；
在main.js 中引入；

import VueClipboard from 'vue-clipboard2'；
Vue.use(VueClipboard)；

使用案例：

<span @click="copy(data)"></span>

···

copy(e) {

    this.$copyText(e).then(function (e) {

        this.$u.toast("复制成功");

    }, function (e) {

        this.$u.toast("复制失败");

    })

}

插件官网：https://github.com/Inndy/vue-clipboard2

注意：这是vue方法，success是调用成功的回调，error和success则相反。

如果报错了建议先看官方文档，或者看一下别人提出的解决方案：

https://blog.csdn.net/u010328533/article/details/122069817

https://blog.csdn.net/AIB_Kasic/article/details/124587880

https://blog.csdn.net/weixin_38384296/article/details/84105115

2022-09-02 补充一个js原生方法：

function copyTwo(){
    const range = document.createRange();
    range.selectNode(document.getElementById('copyInner'));
    const selection = window.getSelection();
    if (selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
 }

注：该方法来源至网络👉http://t.csdn.cn/o3o5E

 2023-06-30 补充uniapp提供的一个复制api：

copy(e) {
      let that = this;
      uni.setClipboardData({
        data: e,
        showToast: false,
        success() {
          that.$u.toast("复制成功");
        },
        fail() {
          that.$u.toast("复制失败");
        },
      });
}

这个方法适用于uniapp项目，相比于上面的vue-clipboard2，如果是uniapp项目，后者在android端显示报错：TypeError: Cannot read property 'createElement' of undefined。

该方法出处：https://uniapp.dcloud.net.cn/api/system/clipboard.html#setclipboarddata

2024-12-16 获取剪贴板内容

const getClipboardContent = async () => {
    try {
        const res = await navigator.clipboard.readText();
        console.log('复制的内容', res);
        return res;
    } catch (err) {
        console.error('err', err);
    }
}