Electron调用clipboard.writeHTML报is not a function错误如何解决？

1. 直接错误原因 #

你当前的导入方式错误，const clipboard = require("electron")引入的是完整的Electron命名空间对象，不是独立的clipboard模块，自然没有writeHTML方法。

2. 分场景修正方案 #

根据你的代码运行场景选择对应的修正方式：

场景1：代码运行在Electron主进程 #

直接修改导入语句，从Electron对象中解构出clipboard模块即可：

// 修正导入语句
const { clipboard } = require("electron")
// 给按钮添加事件监听器，复制id为content的div的innerHTML
document.getElementById("copy").addEventListener("click", () => {
         const code = document.getElementById('content').innerHTML
         clipboard.writeHTML(code)
     })

场景2：代码运行在Electron渲染进程（你当前操作DOM，大概率是这个场景） #

当前Electron默认开启上下文隔离（contextIsolation），渲染进程无法直接调用Node.js API或直接require Electron模块，需要通过preload脚本做能力桥接：

• 第一步：创建BrowserWindow时指定preload脚本路径

// 主进程中创建窗口的代码
const { BrowserWindow } = require('electron')
const path = require('path')

const win = new BrowserWindow({
  webPreferences: {
    // 配置preload脚本的绝对路径
    preload: path.join(__dirname, 'preload.js'),
    // 不要关闭默认开启的contextIsolation和nodeIntegration，避免安全风险
    contextIsolation: true,
    nodeIntegration: false
  }
})

• 第二步：编写preload.js脚本，暴露剪贴板能力给渲染进程

// preload.js
const { clipboard, contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  writeHTMLToClipboard: (html) => clipboard.writeHTML(html)
})

• 第三步：修改渲染进程代码，调用暴露的桥接方法

// 渲染进程原有代码修改为调用preload暴露的方法
document.getElementById("copy").addEventListener("click", () => {
  const code = document.getElementById('content').innerHTML
  window.myAPI.writeHTMLToClipboard(code)
})

补充说明 #

如果你使用的是非常旧的Electron版本，且手动关闭了上下文隔离，也可以直接在渲染进程中用解构导入的方式使用clipboard，但该方案存在严重安全隐患，不推荐使用。

内容的提问来源于stack exchange，提问作者Fever