MENU

使用clipboard.js复制页面内容到剪切板

February 28, 2019 • Read: 157 • 原创作品

最近在写一个程序,需要用到复制的操作,于是就去网上搜索了一下,现有的方案大致有两种:

  一:使用原生javascript中window.clipboardData实现复制到剪贴板功能;

  二:使用Zero Clipboard库;

在尝试了之后发现现有的方案都不能满足需求还有些bug。

方案一仅仅支持ie浏览器,在firefox,chrome浏览器上则不起作用。

方案二则是现有绝大多数网站(包括github等)所采取的方案,ZeroClipboard是国外大神开发的一个

用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard

的时候,它会悄悄隐藏一个小小的 Flash 影片(swf),不会对我们的用户界面造成影响。我们只需要借助

它实现复制功能就行了,我在使用过程中出现点击两次才会复制的情况,第一次点击swf文件不会加载,第二次才加载

  ZeroClipboard 中的 "Zero" 指的就是"不可见,零干扰"。

但是在现代浏览器中,flash逐渐没落,firefox浏览器默认不开启flash,所以Zero Clipboard在

兼容方面也表现不佳。
那么,对于复制到剪切板这种简单的操作有没有一种实现简单,兼容性良好的解决方案呢?有的!那就是github

上的开源项目clipboard.js(官网:http://zenorocha.github.io/clipboard.js/) 官网对于clipboard.js的介绍

非常简单:

  A modern approach to copy text to clipboard No Flash. No dependencies. Just 3kb gzipped

  Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure

or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

That's why clipboard.js exists.(拷贝文本到剪切板不应该复杂,它不应该需要许多步骤以及几百KB的文件,另

外,它不应该依靠flash以及其他框架,这就是clipboard存在的原因)

  使用clipboard简单快捷,并且从官网下载下来的zip格式压缩包里有非常实用的demo,举一个简单的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-div</title>
</head>
<body>
    <!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

非常简单吧,我们只需下面四步:

1.引入clipboard.min.js文件

2.选择一个可以确定被拷贝元素的选择器,本例中使用用的是基本的标签选择器<div>,当然也可以使用id选择器 class选择器等等

3.定义一个button按钮,注意按钮的属性:

  data-clipboard-action="copy" data-clipboard-target="div"
  其中data-clipboard-target属性就是第二步你定义的选择器

4.书写js,建立clipboard对象以及复制后执行的方法

OK,这样功能就完成了,点击按钮后就会发现div的内容已经拷贝到剪切板了。

更详细的代码示例可以看看这个网站:http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/index.html
也给你们看一下上午写的程序吧:https://my.oioweb.cn/dwz/

LayUI真香!

本文章最后更新于2019年04月24日; 如遇到问题,请留言及时通知站长; 欢迎加入 站长交流群,讨论各种问题!

最后编辑于: April 24, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code