使用clipboard.js複製頁面內容到剪下板
轉自：https://www.cnblogs.com/lkxsnow/p/5372665.html
使用clipboard.js複製頁面內容到剪下板
最近在做一個的智慧客服Web端瀏覽器應用，其中有一項需求是客戶在獲取系統返回的
答案後點擊“複製答案”按鈕將答案複製到系統剪下板。本以為這是一個小case,但是發現如果
要對各種主流瀏覽器都有良好的相容性並不簡單。原因在於出於安全原因，大多數現代瀏覽
器都未提供通用的剪貼簿複製介面(或即便有，也預設被禁用)。
上網搜尋了一下，現有的方案大致有兩種：
一：使用原生javascript中window.clipboardData實現複製到剪貼簿功能；
二：使用Zero Clipboard庫；
在嘗試了之後發現現有的方案都不能滿足需求。
方案一僅僅支援ie瀏覽器，在firefox,chrome瀏覽器上則不起作用。
方案二則是現有絕大多數網站（包括github等）所採取的方案，ZeroClipboard是國外大神開發的一個
用於剪貼簿複製的 JS 外掛，它是基於 Flash 來實現跨瀏覽器的複製功能的。當我們使用 ZeroClipboard
的時候，它會悄悄隱藏一個小小的 Flash 影片(swf)，不會對我們的使用者介面造成影響。我們只需要藉助
它實現複製功能就行了。
ZeroClipboard 中的 "Zero" 指的就是"不可見，零干擾"。
對此感興趣的可以參考 http://my.oschina.net/shniu/blog/298406?p=1
但是在現代瀏覽器中，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,舉一個簡單的例子：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>target-div</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <div>hello</div>
10 <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
11
12 <!-- 2. Include library -->
13 <script src="../dist/clipboard.min.js"></script>
14
15 <!-- 3. Instantiate clipboard -->
16 <script>
17 var clipboard = new Clipboard('.btn');
18
19 clipboard.on('success', function(e) {
20 console.log(e);
21 });
22
23 clipboard.on('error', function(e) {
24 console.log(e);
25 });
26 </script>
27 </body>
28 </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的內容已經拷貝到剪下板了。
https://www.cnblogs.com/qingruihappy/p/8465895.html
http://www.cnblogs.com/dongxiaolei/p/7562210.html
https://www.daimabiji.com/formtable/3657.html