clipboard.js 实现动态获取内容并复制到剪切板

最新推荐文章于 2024-06-16 17:45:08 发布

cjFrontEnd

最新推荐文章于 2024-06-16 17:45:08 发布

阅读量1.4w

点赞数 1

分类专栏：插件文章标签：插件 javascript clipboard

本文链接：https://blog.csdn.net/cjFrontEnd/article/details/78341734

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用背景：

项目组新重构的项目里面有利用zeroClipboard.js实现复制内容到剪切板的功能，由于zeroClipboard.js依赖于Flash，而出于我所在公司的安全策略，大部分同事都没有办法下载更新后的Adobe Flash 插件并更新，所以解决原插件使用的bug需要另找方法。

经过一番查找，不利用Flash实现复制内容到剪切板还有另外两种方法：

一、使用原生js里面的window.clipboardData;

二、使用插件clipboard.js.

由于方法一仅支持IE, 对firefox，chrome支持并不友好，因此决定改用clipboard.js.

使用clipboard.js其实很简单，网上查找使用方法也非常方便，大体分为以下几个步骤:

1.引入一个clipboard.js的文件；

2.新建一个clipboard对象；

3.点击按钮获取目标对象里面的内容，将其复制到剪切板。

简单的代码如下：

<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
</head>
<body>
<textareaid="target">复制我里面的内容</textarea></br>
<buttonclass="btn"data-clipboard-action="copy"data-clipboard-target="#target">
点我复制
</button>
<scriptsrc="jquery.js"></script>
<scriptsrc="clipboard.js"></script>
<script>
var clipboard=new Clipboard('.btn');

clipboard.on('success',function(e) {
console.log("内容已经复制到剪切板啦");
});
</script>
</body>
</html>

注意：1.目标对象不能display：none，隐藏之后无法复制，如果需要隐藏，可以设置opacity:0;

上面的方法可以直接复制目标对象里面的内容，可是如果需要复制的内容在点击的时候不存在，需要动态地获取怎么办呢？

在我实际开发的项目里面，需要复制的内容是需要即时获取的，相当于我所需要实现的功能分步骤拆解如下：

1.点击获取点击对象上挂载的参数；

2.传参，通过ajax动态获取需要复制的内容；

3.通过clipboard将内容复制到剪切板。

摸索一番之后，还是如愿实现了项目所需的功能，简单的demo如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button data-param="test"  id="copyBtn" class="btn" data-clipboard-action="copy" data-clipboard-target="#copyTarget">点我复制到剪切板</button>

    <div id="copyTarget" style="opacity: 0;"></div>  <!--隐藏目标对象-->

    <script src="jquery.js"></script>
    <script src="clipboard.js"></script>
<script>

    new Clipboard('.btn', {
        text: function(trigger) {
            var param = $(trigger).data("param"); /*获取目标对象上挂载的参数test*/
            getCopyData(param);
            return trigger.getAttribute('aria-label');
        }
    });

    function getCopyData(param){
        var infodata = "" ;
        if(param == "test"){
            $.ajax({
                url:"package.json",
                type:"get",
                data:{},
                dataType:"json",
                async:false,
                success:function(res){
                    infodata = res.description;  /*获取需要复制的内容*/
                    $("#copyTarget").text(infodata);  /*放入目标对象*/
                },
                error:function(){
                    alert("请求错误！") ;
                }
            })
        }
    }

</script>
</body>
</html>

就记录到这里。

cjFrontEnd

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
clipboard.js 实现动态获取内容并复制到剪切板

使用背景：项目组新重构的项目里面有利用zeroClipboard.js实现复制内容到剪切板的功能，由于zeroClipboard.js依赖于Flash，而出于我所在公司的安全策略，大部分同事都没有办法下载更新后的Adobe Flash 插件并更新，所以解决原插件使用的bug需要另找方法。经过一番查找，不利用Flash实现复制内容到剪切板还有另外两种方法：一、使用原生js里面的
复制链接

扫一扫

专栏目录