简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

clipboard.js用html頁面複製資訊到剪切板

巴扎黑
發布： 2017-07-18 17:00:04
原創
2511 人瀏覽過

最近在做一個的智慧型客服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 Itt be hard.#　　Copying text to the clipboard shouldn Itt be hard.#　　Copying text to the clipboard shouldn Itt be .hard

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存在的原因)

下載路徑：

應用程式：

data-clipboard-target attribute 對應需要Copy的html. 可以攜帶頁面的樣式，如果儲存word。 txt 則無。

樣例如下：

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
登入後複製

data-clipboard-action attribute 用於區別 copy or cut content。 

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>　
登入後複製

you may expect, the cut action only works on or