【摘要】

ClipboardData.setData方法可以轻易设置剪贴板的值，利用该方法可以将页面指定内容轻易复制到剪贴板。

【正文】

一   ClipboardData方法介绍

ClipboardData方法能够对剪切板进行多种操作，这里只用到复制到剪贴板的ClipboardData.setData对象，格式如下：

ClipboardData.setData(“复制内容的格式”,复制内容);

二   实现过程

下图为Html页面中的一部分，我们要实现的功能是点击操作一栏中的“复制网址”后，

将同一行的“填写网址”中的url复制到剪贴板上。url的值用angularJS进行了绑定。

页面代码如下：

<div>

        <table class="table table-striped">

            <thead>

                <tr>

                    <th>填写网址</th>

                    <th>填写状态</th>

                    <th style="min-width:20%;">操作</th>

                </tr>

            </thead>

            <tr ng-repeat="item in view.NewEmployeeList track by $index">

                <td>{{item.Url}}</td>

                <td>{{item.State}}</td>

                <td>

                    <!--<a>复制网址</a>-->

                    <a href="" ng-click="copy(item.Url)" >复制网址</a>

                    <a>信息导入</a>

                    <a href="" ng-click="open(item.Id)">编辑</a>

                    <a ng-click="Delete(item.Id)">删除</a>

                </td>

            </tr>

        </table>

 </div>

复制按钮与方法copy()绑定。JS中代码：

    $scope.copy = function (Url) {

        window.clipboardData.setData("text", Url);

        alert('已复制到剪贴板：'+Url);

    }

在页面上点击第一个“复制网址”，效果：

点击第二个“复制网址”：

确认已分别复制到剪贴板。

三   后记

复制到剪贴板这一功能在网页制作中经常会用到，zeroclipboard是比较常用的一种方法，但使用方法略为复杂，版本的不同使用方式也不一样。相比之下ClipboardData用法简单，但是只能在IE中使用，chrome等浏览器貌似较高版本也能使用，这里并没有作测试。