30分钟上手Electron：打造你的跨平台文档处理工具

【免费下载链接】electron 使用Electron构建跨平台桌面应用程序，支持JavaScript、HTML和CSS 【免费下载链接】electron 项目地址: https://gitcode.com/GitHub_Trending/el/electron

你是否还在为Windows、macOS和Linux系统间的文档处理工具不兼容而烦恼？是否希望用网页技术快速开发出专业级的桌面文档应用？本文将带你从零开始，用Electron构建一个支持文档编辑与电子表格功能的跨平台办公工具，无需学习复杂的C++或Objective-C。

读完本文你将获得：

  • 3步搭建Electron开发环境的实操指南
  • 文档编辑器与电子表格组件的无缝集成方案
  • 一键打包发布全平台应用的自动化流程
  • 10个提升办公效率的实用功能代码示例

为什么选择Electron构建办公应用

Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用的框架，它将Chromium和Node.js合并到同一个运行时环境中，允许开发者使用网页技术创建原生桌面应用。许多知名应用如Visual Studio Code、Slack和Figma都是基于Electron开发的。

Electron的核心优势在于：

  • 跨平台一致性：一套代码运行在Windows、macOS和Linux
  • Web技术栈复用：无需学习新语言，直接使用前端技能
  • 原生API访问：通过Electron API调用文件系统、系统通知等底层功能
  • 丰富的生态系统：npm上有数万个现成的组件可直接使用

Electron应用架构概览

Electron应用采用主进程-渲染进程架构：

mermaid

  • 主进程：控制应用生命周期，管理窗口，通过Electron API与系统交互
  • 渲染进程：每个窗口对应一个渲染进程，使用HTML/CSS/JS构建界面
  • IPC通信：主进程与渲染进程通过ipcMain和ipcRenderer模块通信

快速搭建开发环境

准备工作

首先确保你的系统已安装Node.js（建议v14+）和npm。然后通过以下命令克隆项目仓库：

git clone https://gitcode.com/GitHub_Trending/el/electron.git
cd electron
npm install

项目结构解析

Electron项目的典型结构如下：

electron/
├── default_app/          # 默认应用示例
│   ├── index.html        # 应用界面
│   ├── main.ts           # 主进程代码
│   └── preload.ts        # 预加载脚本
├── docs/                 # 文档资料
├── lib/                  # 核心库
└── package.json          # 项目配置

其中，default_app目录包含了一个完整的Electron应用示例，我们可以基于此进行开发。

启动示例应用

运行以下命令启动Electron默认应用：

npm start

你将看到Electron的默认欢迎界面，其中包含了应用图标和基本导航：

Electron默认应用界面

这个界面展示了Electron的基本窗口结构，我们将在下一步扩展它的功能。

文档编辑器集成

基础窗口配置

首先修改default_app/main.ts文件，配置一个适合文档编辑的窗口：

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    title: 'Electron文档处理器',
    webPreferences: {
      preload: path.join(__dirname, 'preload.ts'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  mainWindow.loadFile('index.html');
  // 打开开发者工具
  mainWindow.webContents.openDevTools();
};

集成富文本编辑器

我们使用TinyMCE作为富文本编辑器，通过CDN引入到default_app/index.html中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron文档处理器</title>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <div class="app-container">
    <div class="toolbar">
      <button id="save-btn">保存文档</button>
      <button id="export-btn">导出PDF</button>
      <button id="open-spreadsheet">打开电子表格</button>
    </div>
    <textarea id="editor"></textarea>
  </div>

  <script>
    tinymce.init({
      selector: '#editor',
      plugins: 'advlist autolink lists link image charmap preview anchor pagebreak',
      toolbar_mode: 'floating',
      height: 'calc(100vh - 60px)'
    });
  </script>
</body>
</html>

实现文档保存功能

通过Electron的ipcRenderer模块与主进程通信，实现文件保存功能。首先在preload.ts中暴露API：

contextBridge.exposeInMainWorld('electronAPI', {
  saveFile: (content: string) => ipcRenderer.invoke('save-file', content),
  exportPDF: () => ipcRenderer.invoke('export-pdf')
});

然后在主进程中处理文件保存逻辑：

ipcMain.handle('save-file', async (event, content) => {
  const { filePath } = await dialog.showSaveDialog({
    title: '保存文档',
    defaultPath: 'document.md',
    filters: [{ name: 'Markdown文件', extensions: ['md'] }]
  });
  
  if (filePath) {
    await fs.promises.writeFile(filePath, content);
    return { success: true, filePath };
  }
  return { success: false };
});

电子表格功能实现

引入SheetJS库

SheetJS（xlsx）是一个强大的电子表格处理库，支持读写Excel、CSV等格式文件。通过npm安装：

npm install xlsx

创建电子表格窗口

在主进程中添加创建电子表格窗口的函数：

ipcMain.on('open-spreadsheet', () => {
  const spreadsheetWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    title: '电子表格编辑器',
    parent: mainWindow,
    webPreferences: {
      preload: path.join(__dirname, 'preload.ts')
    }
  });
  
  spreadsheetWindow.loadFile('spreadsheet.html');
});

实现电子表格基本功能

创建spreadsheet.html文件，集成SheetJS：

<!DOCTYPE html>
<html>
<head>
  <title>电子表格编辑器</title>
  <style>
    #table-container { overflow: auto; height: 80vh; }
    table { border-collapse: collapse; width: 100%; }
    td, th { border: 1px solid #ddd; padding: 8px; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="import-btn">导入Excel</button>
    <button id="export-btn">导出Excel</button>
  </div>
  <div id="table-container"></div>

  <script src="../node_modules/xlsx/dist/xlsx.full.min.js"></script>
  <script>
    // 电子表格处理逻辑
    let workbook;
    
    document.getElementById('import-btn').addEventListener('click', async () => {
      const filePaths = await window.electronAPI.openFileDialog();
      if (filePaths.length > 0) {
        const data = await window.electronAPI.readFile(filePaths[0]);
        workbook = XLSX.read(data, { type: 'array' });
        renderSheet(workbook.Sheets[workbook.SheetNames[0]]);
      }
    });
    
    function renderSheet(sheet) {
      const container = document.getElementById('table-container');
      container.innerHTML = XLSX.utils.sheet_to_html(sheet);
    }
  </script>
</body>
</html>

应用打包与分发

完成功能开发后，需要将应用打包为各平台可执行文件。Electron提供了多种打包工具，推荐使用Electron Forge。

使用Electron Forge打包

首先安装Electron Forge：

npm install --save-dev @electron-forge/cli
npx electron-forge import

然后配置package.json中的打包参数：

"config": {
  "forge": {
    "packagerConfig": {
      "name": "DocProcessor",
      "icon": "icons/icon"
    },
    "makers": [
      {
        "name": "@electron-forge/maker-squirrel",
        "config": {
          "name": "doc_processor"
        }
      },
      {
        "name": "@electron-forge/maker-zip",
        "platforms": ["darwin"]
      },
      {
        "name": "@electron-forge/maker-deb",
        "config": {}
      }
    ]
  }
}

最后执行打包命令：

npm run make

打包完成后，可在out目录下找到各平台的安装文件。完整的打包流程可参考Electron应用分发文档。

高级功能扩展

PDF导出功能

利用Electron的webContents.printToPDF() API实现文档导出为PDF：

ipcMain.handle('export-pdf', async (event) => {
  const window = BrowserWindow.fromWebContents(event.sender);
  const { filePath } = await dialog.showSaveDialog({
    title: '导出为PDF',
    defaultPath: 'document.pdf',
    filters: [{ name: 'PDF文件', extensions: ['pdf'] }]
  });
  
  if (filePath) {
    const pdfData = await window.webContents.printToPDF({
      landscape: false,
      printBackground: true
    });
    await fs.promises.writeFile(filePath, pdfData);
    return { success: true };
  }
  return { success: false };
});

文档版本历史

使用IndexedDB实现本地文档版本控制：

// 渲染进程中实现版本保存
async function saveVersion(content) {
  const db = await openDB('DocHistory', 1, {
    upgrade(db) {
      db.createObjectStore('versions', { keyPath: 'id', autoIncrement: true });
    }
  });
  
  const timestamp = new Date().toISOString();
  await db.add('versions', { content, timestamp });
  
  // 只保留最近10个版本
  const versions = await db.getAll('versions');
  if (versions.length > 10) {
    await db.delete('versions', versions[0].id);
  }
}

总结与下一步

通过本文的步骤，你已经构建了一个具备文档编辑和电子表格功能的基础办公应用。这个应用具有以下特点：

  • 使用Web技术栈开发，跨平台运行在Windows、macOS和Linux
  • 支持富文本编辑和电子表格处理
  • 提供文档保存、PDF导出等实用功能
  • 可打包为各平台原生应用

下一步你可以扩展更多高级功能：

  • 集成云存储服务实现文档同步
  • 添加协作编辑功能支持多人同时编辑
  • 实现OCR文字识别功能
  • 开发自定义插件系统

Electron生态系统持续发展，更多功能可参考官方文档和API参考。现在就开始用Electron打造你的专属办公工具吧！

如果觉得本文对你有帮助，请点赞收藏并关注，后续将带来更多Electron高级技巧和最佳实践。你还希望用Electron开发什么类型的应用？欢迎在评论区留言告诉我们！

【免费下载链接】electron 使用Electron构建跨平台桌面应用程序，支持JavaScript、HTML和CSS 【免费下载链接】electron 项目地址: https://gitcode.com/GitHub_Trending/el/electron

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

一、AiFlutter 低代码平台介绍

avatar 开源鸿蒙跨平台开发者社区

白帽系列01: 抓包

WhiteHat是一个Java网络抓包分析库，支持TCP/UDP等协议的数据包捕获与发送。使用前需安装WinPcap/libpcap依赖库。通过Maven引入依赖后，只需3步即可实现抓包功能：打开网卡、定义处理程序、开始抓包。支持BPF过滤表达式、数据包转存为.pcap文件，并提供ARP/ICMP/DNS/DHCP等协议处理示例。特别提供高效的IP网段扫描(5000IP/秒)和端口扫描(5000端

avatar 开源鸿蒙跨平台开发者社区
cover

Android BIND_NOTIFICATION_LISTENER_SERVICE 权限详解

avatar 开源鸿蒙跨平台开发者社区