Electron.js点击按钮导出PDF时did-finish-load不生效问题

核心问题点 #

did-finish-load事件不生效、导出异常主要来自四个原因：

• 事件绑定逻辑错误：did-finish-load仅在页面首次完整加载（含所有静态资源加载完成）时触发一次，单页应用路由跳转、动态DOM更新不会重复触发该事件，如果在收到导出请求时才绑定这个事件，大概率页面早就加载完成，事件永远不会触发。
• 执行时机错误：现有代码收到IPC信号就直接调用printToPDF，没有判断页面是否处于加载状态、动态内容是否渲染完成，容易导出空白页或者内容不完整的PDF。
• 参数缺失：代码中printToPDF传入的options变量没有定义，Electron 16对该方法的参数校验严格，缺省配置容易直接抛错。
• 写入逻辑风险：用回调版fs.writeFile没有等待写入完成就走完流程，极端情况会导致文件损坏、写入失败。

可直接运行的修复代码 #

主进程代码 #

const { ipcMain, BrowserWindow } = require('electron')
const fs = require('fs/promises')
const path = require('path')

// 窗口初始化时只绑定一次did-finish-load，不要重复绑定
const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})
mainWindow.loadFile('index.html')
mainWindow.webContents.on('did-finish-load', () => {
  console.log('页面初始加载完成')
})

ipcMain.on('exportPdf', async (event, savePath) => {
  try {
    // 先判断页面是否还在加载，未加载完就等一次加载完成
    if (mainWindow.webContents.isLoading()) {
      await new Promise(resolve => {
        mainWindow.webContents.once('did-finish-load', resolve)
      })
    }

    // 补全PDF导出配置
    const pdfOptions = {
      printBackground: true,
      pageSize: 'A4',
      margins: { marginType: 'default' }
    }

    const pdfBuffer = await mainWindow.webContents.printToPDF(pdfOptions)
    await fs.writeFile(savePath, pdfBuffer)
    console.log(`PDF写入成功，路径：${savePath}`)
    event.reply('exportPdf:success', savePath)
  } catch (err) {
    console.error('PDF导出失败：', err)
    event.reply('exportPdf:fail', err.message)
  }
})

渲染进程触发逻辑 #

不要让主进程判断页面渲染完成时机，等所有需要导出的内容（包括动态生成的图表、长列表、异步加载的图片）全部渲染完成后，再发送导出信号：

const ipcRenderer = require('electron').ipcRenderer
const exportBtn = document.querySelector('#export-pdf-btn')

exportBtn.addEventListener('click', () => {
  // 如有异步渲染内容，在这里等待渲染完成再往下走
  // 例：await chartInstance.render()、等待所有图片触发load事件
  const savePath = path.join(__dirname, `./导出文件_${Date.now()}.pdf`)
  ipcRenderer.send('exportPdf', savePath)
})

避坑提示 #

• 不要每次触发导出都绑定did-finish-load事件，会造成事件重复绑定、内存泄漏，用once做单次绑定即可。
• Electron 16中printToPDF返回的是Uint8Array类型的二进制数据，直接写入文件即可，不要做UTF-8转码，否则会导致PDF文件损坏无法打开。
• 生产环境建议调用系统保存对话框dialog.showSaveDialog让用户自主选择保存路径，不要硬编码路径，容易触发权限问题。

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