正文

在瀏覽器中可以通過 JavaScript 腳本來讀寫剪貼板數(shù)據(jù)，常用的是 document.execCommand 方法：

// 復(fù)制數(shù)據(jù)
const inputElement = document.querySelector('#input')
inputElement.select()
document.execCommand('copy')

// 粘貼數(shù)據(jù)
const pasteText = document.querySelector('#output')
pasteText.focus()
document.execCommand('paste')

不過該方法有兩個缺點：

• 只能將選中的內(nèi)容復(fù)制到剪貼板，不能通過代碼寫入任意內(nèi)容
• 該 API 是同步操作，如果數(shù)據(jù)量較大，會造成頁面卡頓

后來瀏覽器廠商提出了異步 Clipboard API，但限制很多，例如：

• 只有 HTTPS 頁面才能使用這個 API
• 調(diào)用時需要明確獲取用戶授權(quán)

而在 Electron 中讀寫剪貼板非常容易，因為 clipboard 模塊提供了很多調(diào)用系統(tǒng)剪貼板相關(guān)的 API：

這些 API 既可以在主進程中調(diào)用，也可以在渲染進程中調(diào)用。

但是需要注意，在渲染進程中（即 preload.js 腳本中），必須是非沙箱環(huán)境下才能使用 clipboard 模塊，而 Electron 創(chuàng)建窗口時是默認開啟沙箱模式的，因此要手動設(shè)置 sandbox 為 false，否則會報下面的錯：

接下來就為大家講解 Electron 剪貼板模塊中的常用方法：

availableFormats

availableFormats 用于查看當前剪貼板內(nèi)支持的數(shù)據(jù)格式。剪貼板內(nèi)的數(shù)據(jù)一般都要經(jīng)歷兩個環(huán)節(jié)：

• 復(fù)制的時候，粘貼板內(nèi)可以同時存放多種格式數(shù)據(jù)，被稱為 clipboard formats
• 粘貼的時候，目標程序可以按照這些 formats 來選擇自己最需要的格式

假設(shè)用戶復(fù)制帶樣式的文本，那么剪貼板會存放 RTF 和純文本兩種格式的數(shù)據(jù)，粘貼時，目標窗口會自動優(yōu)先選擇最描述性格式的數(shù)據(jù)，如果窗口識別 RTF，則使用帶格式的數(shù)據(jù)，否則就使用文本數(shù)據(jù)，此時格式設(shè)置信息丟失。

舉個例子，例如我在網(wǎng)頁上復(fù)制百度的 logo，會得到兩種格式的數(shù)據(jù)：

• html 格式

• tiff格式

此時如果調(diào)用 availableFormats方法，會得到兩種結(jié)果：

const formats = clipboard.availableFormats()
console.log(formats) // [ 'text/html', 'image/png' ]

應(yīng)用程序還可以自己注冊粘貼板格式（registered clipboard formats），例如在 vscode 里面復(fù)制了一段代碼，會得到三種格式的數(shù)據(jù)：

• html

• utf8-plain-text

• org.chromium.web-custom-data

其中最后一種就是 vscode 自定義的數(shù)據(jù)格式，可以調(diào)用 availableFormats驗證一下：

const formats = clipboard.availableFormats()
console.log(formats) // [ 'text/plain', 'text/html', 'vscode-editor-data' ]

可以看到，最后一種是 vscode-editor-data 是自定義的。

readText 和 writeText

從剪貼板讀取或向剪貼板寫入純文本數(shù)據(jù)：

clipboard.writeText('寫入文本')
const result = clipboard.readText()
console.log(result) // 寫入文本

readHTML 和 writeHTML

從剪貼板讀取或向剪貼板寫入 HTML 格式數(shù)據(jù)：

clipboard.writeHTML('<p style="color: red">紅色</p>')
const result = clipboard.readHTML()
console.log(result) // <meta charset='utf-8'><p style="color: red">紅色</p>

readImage 和 writeImage

從剪貼板讀取或向剪貼板寫入圖片格式數(shù)據(jù)：

clipboard.writeImage(nativeImage.createFromPath(path.join(__dirname, 'apple.png')))
const result = clipboard.readImage()
console.log(result)

readRTF 和 writeRTF

從剪貼板讀取或向剪貼板寫入 RTF 格式數(shù)據(jù)：

clipboard.writeRTF('{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard\nThis is some {\b bold} text.\par\n}')
const result = clipboard.readRTF()
console.log(result)

clear

這個 API 最簡單，直接清空剪貼板內(nèi)容：

clipboard.clear()

以上就是Electron 剪貼板實現(xiàn)示例詳解的詳細內(nèi)容，更多關(guān)于Electron 剪貼板的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論