Electron 剪貼簿實現範例詳解

2023-03-11 06:01:19

正文

在瀏覽器中可以通過 JavaScript 指令碼來讀寫剪貼簿資料，常用的是 document.execCommand 方法：

// 複製資料
const inputElement = document.querySelector('#input')
inputElement.select()
document.execCommand('copy')

// 貼上資料
const pasteText = document.querySelector('#output')
pasteText.focus()
document.execCommand('paste')

不過該方法有兩個缺點：

只能將選中的內容複製到剪貼簿，不能通過程式碼寫入任意內容
該 API 是同步操作，如果資料量較大，會造成頁面卡頓

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

只有 HTTPS 頁面才能使用這個 API
呼叫時需要明確獲取使用者授權

而在 Electron 中讀寫剪貼簿非常容易，因為 clipboard 模組提供了很多呼叫系統剪貼簿相關的 API：

這些 API 既可以在主程序中呼叫，也可以在渲染程序中呼叫。

但是需要注意，在渲染程序中（即 preload.js 指令碼中），必須是非沙箱環境下才能使用 clipboard 模組，而 Electron 建立視窗時是預設開啟沙箱模式的，因此要手動設定 sandbox 為 false，否則會報下面的錯：

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

availableFormats

availableFormats 用於檢視當前剪貼簿內支援的資料格式。剪貼簿內的資料一般都要經歷兩個環節：

複製的時候，貼上板內可以同時存放多種格式資料，被稱為 clipboard formats
貼上的時候，目標程式可以按照這些 formats 來選擇自己最需要的格式

假設使用者複製帶樣式的文字，那麼剪貼簿會存放 RTF 和純文字兩種格式的資料，貼上時，目標視窗會自動優先選擇最描述性格式的資料，如果視窗識別 RTF，則使用帶格式的資料，否則就使用文字資料，此時格式設定資訊丟失。

舉個例子，例如我在網頁上覆制百度的 logo，會得到兩種格式的資料：

html 格式

tiff格式

此時如果呼叫 availableFormats方法，會得到兩種結果：

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

應用程式還可以自己註冊貼上板格式（registered clipboard formats），例如在 vscode 裡面複製了一段程式碼，會得到三種格式的資料：

html

utf8-plain-text

org.chromium.web-custom-data

其中最後一種就是 vscode 自定義的資料格式，可以呼叫 availableFormats驗證一下：

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

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

readText 和 writeText

從剪貼簿讀取或向剪貼簿寫入純文字資料：

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

readHTML 和 writeHTML

從剪貼簿讀取或向剪貼簿寫入 HTML 格式資料：

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

從剪貼簿讀取或向剪貼簿寫入圖片格式資料：

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

readRTF 和 writeRTF

從剪貼簿讀取或向剪貼簿寫入 RTF 格式資料：

clipboard.writeRTF('{rtf1ansi{fonttblf0fswiss Helvetica;}f0pardnThis is some {b bold} text.parn}')
const result = clipboard.readRTF()
console.log(result)

clear

這個 API 最簡單，直接清空剪貼簿內容：

clipboard.clear()

以上就是Electron 剪貼簿實現範例詳解的詳細內容，更多關於Electron 剪貼簿的資料請關注it145.com其它相關文章！