Electron實現(xiàn)文件復(fù)制到剪切板的方案

更新時間：2024年11月13日 08:23:23 作者：smallzip

這篇文章主要介紹了Electron實現(xiàn)文件復(fù)制到剪切板的解決方案,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

前言

electron的剪切板沒有提供文件、音頻、視頻等等類型的支持。

技術(shù)調(diào)研

我們在mac、windows系統(tǒng)中，右鍵本地文件是支持復(fù)制的，并寫入到剪切板的速度很快。

基于這個方向，我們查找到了如下方法：

window：使用powershell腳本命令，可以實現(xiàn)文件復(fù)制

`powershell -command "& {Set-Clipboard -Path '${filePath}'}"`

mac：使用osascript腳本指令，可以實現(xiàn)文件復(fù)制

`osascript -e 'set the clipboard to POSIX file "${filePath}"'`

注意點

powershell和asascript在兩個平臺支持復(fù)制文件、音頻、視頻等等，前提條件都是需要文件已經(jīng)存在于本地。

所以，我們復(fù)制的內(nèi)容必須先現(xiàn)在到本地，再進(jìn)行復(fù)制到剪切板。

實現(xiàn)方案

渲染層提供preload

contextBridge.exposeInMainWorld("mainWindowAPI", {
  copyFile: (filePath:string) => ipcRenderer.invoke('copy-file', filePath)
});

復(fù)制的實際，需要傳遞已經(jīng)緩存到本地的文件路徑；

主進(jìn)程接收ipc

  // 復(fù)制文件到剪切板
  ipcMain.on("copy-file", (event: Electron.IpcMainEvent, filePath: string) => {
    // 檢查filePath是否存在，不存在則退出
    if(!filePath) {
      event.reply("copy-file", false);
      return;
    }
    
    // 處理base64
    if (filePath.startsWith('data:')) {
      try {
        const image = Buffer.isBuffer(filePath) ? nativeImage.createFromBuffer(filePath) : nativeImage.createFromDataURL(url);
        clipboard.writeImage(image)
        Logger.log(`【copy-file】復(fù)制base64成功`)
        event.reply("copy-file", true);
      } catch (error) {
        Logger.log(`【copy-file】復(fù)制base64失敗 ${error}`)
        event.reply("copy-file", false);
      }
      return
    }

    // 檢查是否為本地路徑，如果不是本地路徑則退出
    if(filePath.includes('file://')) {
      event.reply("copy-file", false);
      return;
    }

    // 執(zhí)行復(fù)制操作
    copyFile(filePath.replace("file:///", "")).then((res: boolean) => {
      event.reply("copy-file", res);
    }).catch(() => {
      event.reply("copy-file", false);
    })
  });

1.檢查filePath是否存在，不存在則退出

2.如果是base64圖片，則使用electron的nativeImage轉(zhuǎn)換成為PNG圖片（或者jpg等，可以看官網(wǎng)）

3.檢查是否為本地路徑，如果不是本地路徑則退出，因為復(fù)制到剪切板必須是本地文件，網(wǎng)絡(luò)連接是不支持的

4.是本地連接，去除file:///頭，只需要后面的文件路徑，路徑如下：/Users/自己設(shè)備的賬戶名/Library/Application Support/應(yīng)用名稱/Cache/test.dmg

檢查不同平臺

/**
 * 復(fù)制文件到剪貼板
 *
 * @param localFileUrl 本地文件URL
 * @returns 復(fù)制結(jié)果，成功為true，失敗為false
 */
export function copyFile(localFileUrl: string) {
	if (process.platform === 'darwin') {
		return copyFileForMac(localFileUrl);
	} else if (process.platform === 'win32') {
		return copyFileForWindows(localFileUrl)
	}
}

mac系統(tǒng)復(fù)制到剪切板

/**
 * 將文件復(fù)制到Mac的剪貼板
 *
 * @param localFileUrl 本地文件的URL路徑
 * @returns 返回一個Promise，成功時返回true，失敗時返回錯誤消息
 */
function copyFileForMac(localFileUrl: string) {
  return new Promise((resolve, reject) => {
   // 文件的路徑
   const filePath = path.resolve(localFileUrl);
   Logger.log(`【copyFileForMac】Copying file to clipboard: ${filePath}`)
   // 使用AppleScript將文件復(fù)制到剪貼板
   const copyFileToClipboardScript = `osascript -e 'set the clipboard to POSIX file "${filePath}"'`;
   // 執(zhí)行AppleScript
   try {
    // 檢查文件是否存在本地
    if (!fs.existsSync(filePath)) {
     reject(false)
     Logger.error(`【copyFileForMac】Error: File not found at path ${filePath}`);
    }
    
    exec(copyFileToClipboardScript, (error: { message: any; }, stdout: any, stderr: any) => {
     if (error) {
      reject(false)
      Logger.error(`【copyFileForMac】Error: ${error.message}`);
      return;
     }
     
     if (stderr) {
      reject(false)
      Logger.error(`【copyFileForMac】Error: ${stderr}`);
      return;
     }
     
     resolve(true)
     Logger.log('【copyFileForMac】文件已經(jīng)被寫入剪切板');
    });
   } catch (error) {
    Logger.error(`【copyFileForMac】Error: ${error}`);
    reject(false)
   }
  });
}

windows系統(tǒng)復(fù)制到剪切板

/**
 * 將文件復(fù)制到Windows系統(tǒng)的剪貼板
 *
 * @param localFileUrl 文件路徑
 * @returns 返回一個Promise，如果成功復(fù)制到剪貼板，則resolve為true；如果失敗，則reject為錯誤信息
 */
function copyFileForWindows(localFileUrl: string) {
  return new Promise((resolve, reject) => {
   // 文件的路徑
   const filePath = path.resolve(localFileUrl);
   Logger.log(`【copyFileForWindows】Copying file to clipboard: ${filePath}`)
   // 使用powershell命令將文件復(fù)制到剪貼板
   const copyFileToClipboardScript = `${powershellBin} -command "& {Set-Clipboard -Path '${filePath}'}"`;
   // 執(zhí)行powershell命令
   try {
    // 檢查文件是否存在本地
    if (!fs.existsSync(filePath)) {
     reject(false)
     Logger.error(`【copyFileForMac】Error: File not found at path ${filePath}`);
    }
    
    exec(copyFileToClipboardScript, (error: { message: any; }, stdout: any, stderr: any) => {
     if (error) {
      reject(error)
      Logger.error(`【copyFileForWindows】Error: ${error.message}`);
      return;
     }
     
     if (stderr) {
      reject(stderr)
      Logger.error(`【copyFileForWindows】Error: ${stderr}`);
      return;
     }
     
     resolve(true)
     Logger.log('【copyFileForWindows】文件已經(jīng)被寫入剪切板');
    });
   } catch (error) {
    reject(error)
    Logger.error(`【copyFileForWindows】Error: ${error}`);
   }
  });
}

總結(jié)

electron的clipboard剪切板只支持text、html、rtf、bookmark、writeImage等，5種類型寫入到剪切板，并不支持其他文件類型、如file、video、audio等等

const { clipboard } = require('electron')

clipboard.write({
  text: 'test',
  html: '<b>Hi</b>',
  rtf: '{\rtf1\utf8 text}',
  bookmark: 'a title'
})

console.log(clipboard.readText())
// 'test'

console.log(clipboard.readHTML())
// <meta charset='utf-8'><b>Hi</b>

console.log(clipboard.readRTF())
// '{\rtf1\utf8 text}'

console.log(clipboard.readBookmark())
// { title: 'a title', url: 'test' }

我們參考系統(tǒng)級別的復(fù)制體性，最終實現(xiàn)了的文件復(fù)制到剪切板功能。

能夠?qū)崿F(xiàn)的前提是，文件已經(jīng)存儲在用戶本地設(shè)備。

補(bǔ)充

業(yè)務(wù)層面，如何將文件緩存到本地，則需要用到electron的WebRequest網(wǎng)絡(luò)攔截功能，再業(yè)務(wù)層資源下拉的時候攔截對應(yīng)的請求，并將資源緩存到我們指定的文件夾位置，后續(xù)復(fù)制的時候，則直接讀取緩存的文件路徑提供給 copy-file。

以上就是Electron實現(xiàn)文件復(fù)制到剪切板的方案的詳細(xì)內(nèi)容，更多關(guān)于Electron文件復(fù)制到剪切板的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: