正文

在瀏覽器中可以通過 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')

不過該方法有兩個(gè)缺點(diǎn)：

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

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

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

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

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

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

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

availableFormats

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

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

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

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

• html 格式

• tiff格式

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

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

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

• html

• utf8-plain-text

• org.chromium.web-custom-data

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

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

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

clipboard.clear()

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

最新評(píng)論