小笔记：Electron中关联格式、处理文件、创建链接的相关编程-Toy模板网

这篇具有很好参考价值的文章主要介绍了小笔记：Electron中关联格式、处理文件、创建链接的相关编程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Electron 笔记：Electron中关联格式、处理文件、创建链接的相关编程

作者：李俊才（jcLee95）：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/131041514

【介绍】：本文介绍关于在Electron中绑定文件格式、在菜单中打开、使用文件API、处理桌面链接等等。

1. 全文概述

2. Electron实现绑定文件格式

2.1 背景

在使用Electron开发桌面端软件时，有时会有关联一个文件格式的需求。常见的比如以下列出的几个典型场景：

场景	描述
打开特定格式的文件	如果你的应用程序专门处理某种特定的文件格式（例如文本文件、图像文件、音频文件等），你可能希望将应用程序与该文件格式关联起来，使用户可以通过双击文件或通过文件管理器打开文件时自动使用你的应用程序打开。
自定义文件关联和打开方式	即使你的应用程序不是专门处理特定文件格式的，但你可能希望用户能够自定义文件关联和打开方式。这意味着用户可以通过将特定文件类型与你的应用程序关联起来，使你的应用程序成为默认的打开方式。
文件拖放支持	如果你的应用程序支持拖放文件到应用程序界面进行处理，你可能需要确保你的应用程序能够识别和处理特定文件格式。

通过绑定文件格式，你的应用程序可以更方便地与用户的文件进行交互，提供更好的用户体验和更高的效率。

要实现文件格式的绑定，你可以采取以下步骤：

在应用程序的 package.json 文件中，使用 "fileAssociations" 字段定义你希望关联的文件类型和文件扩展名。例如，如果你想关联 .txt 文件，可以添加以下代码：
```
"fileAssociations": [
  {
    "ext": "txt",
    "name": "Text File",
    "role": "Editor"
  }
]
```
在应用程序的主进程中，使用 app 模块的 setAsDefaultProtocolClient 方法来设置默认文件关联。例如，如果你希望将应用程序与 .txt 文件关联起来，可以添加以下代码：
```
import { app } from 'electron';

app.setAsDefaultProtocolClient('myapp', process.execPath, ['--open-file']);
```
这将使得你的应用程序在打开 .txt 文件时自动启动，并且可以通过 process.argv 获取打开的文件路径。

在应用程序的主进程或渲染进程中，处理打开文件的事件，以便在应用程序中加载和处理文件数据。

在主进程中，可以监听 open-file 事件：

app.on('open-file', (event, filePath) => {
  // 处理打开的文件
});

在渲染进程中，可以使用 remote 模块来访问主进程的方法：

import { remote } from 'electron'; // 注意：Electron 12 以后，需要单独按照 @electron/remote 模块

const { filePath } = remote.process.argv[1]; // 获取打开的文件路径

通过实现文件格式的绑定，你的应用程序可以更方便地与特定文件类型进行交互，并提供更好的用户体验。用户可以直接双击文件

2.2 实现步骤

当使用Electron开发应用程序时，可以通过以下步骤来实现打开特定格式的文件：

2.2.1 检测文件打开事件

在主进程中，通过监听app模块的open-file事件来捕获文件打开请求。这个事件在应用程序已经运行，并且用户点击了文件或使用命令行参数打开文件时触发。

import { app } from 'electron';

app.on('open-file', (event, filePath) => {
  event.preventDefault(); // 阻止应用程序的默认行为

  // 在这里处理打开文件的逻辑
});

2.2.2 解析文件信息

在文件打开事件中，可以使用filePath参数来获取打开的文件路径。根据特定文件格式，可能需要进一步解析文件内容或元数据。

2.2.3 创建新窗口或在当前窗口中加载文件

根据应用程序需求，可以选择在新窗口中打开文件或在当前窗口中加载文件。下面是两种常见的方法：

创建新窗口：使用BrowserWindow模块创建一个新的窗口，并加载文件。

import { app, BrowserWindow } from 'electron';

app.on('open-file', (event, filePath) => {
  event.preventDefault();

  // 创建新窗口
  const win = new BrowserWindow({ width: 800, height: 600 });

  // 加载文件
  win.loadFile(filePath);
});

在当前窗口中加载文件：如果你的应用程序已经有一个主窗口，可以直接在当前窗口中加载文件。

import { app, BrowserWindow } from 'electron';

app.on('open-file', (event, filePath) => {
  event.preventDefault();

  // 获取主窗口
  const mainWindow = BrowserWindow.getFocusedWindow();

  // 加载文件
  mainWindow.loadFile(filePath);
});

注意：无论选择哪种方法，都要确保在加载文件之前已经创建了窗口实例或确保主窗口已经存在。

2.2.4 添加菜单项（可选）

为了更好的用户体验，可以在应用程序菜单中添加 "打开文件"菜单项，允许用户手动选择并打开文件。这可以通过在主进程中创建菜单模板来实现：

import { app, Menu, dialog } from 'electron';

// 创建菜单模板
const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '打开',
        accelerator: 'CmdOrCtrl+O', // 快捷键
        click: async () => {
          // 显示文件选择对话框
          const { filePaths } = await dialog.showOpenDialog({
            properties: ['openFile']
          });

          // 检查是否选择了文件
          if (filePaths && filePaths.length > 0) {
            const filePath = filePaths[0];
            
            // 处理打开文件的逻辑（如创建新窗口或加载到当前窗口）
          }
        }
      }
    ]
  }
];

// 创建应用程序菜单
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

通过添加"打开"菜单项，用户可以选择文件并触发打开文件的逻辑。这些是在Electron中实现打开特定格式文件的基本步骤。实际中可能还需要处理文件内容的读取、解析和展示等操作。

3. 使用 NodeJS API 处理文件

使用 electron 的好处就是它可以使用 NodeJS 的 API。如果是对于常用的文件读写删移，都可以通过调用相关API快速实现目的。

3.1 读取文件

在Electron中，可以使用Node.js的文件系统模块fs来读取文件。以下是一个读取文件的示例：

import fs from 'fs';

fs.readFile('path/to/file', 'utf-8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(data); // 文件内容
});

在上述示例中，使用fs.readFile()方法读取文件，指定文件路径和字符编码。回调函数中的data参数将包含文件的内容。

3.2 写入文件

若要将数据写入文件，可以使用fs.writeFile()方法。以下是一个写入文件的示例：

import fs from 'fs';

const content = 'Hello, World!';

fs.writeFile('path/to/file', content, 'utf-8', (err) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log('文件写入成功');
});

在上述示例中，使用fs.writeFile()方法将内容写入文件。指定文件路径、内容和字符编码。回调函数中的err参数用于检查是否发生错误。

3.3 复制文件

若要复制文件，可以使用fs.copyFile()方法。以下是一个复制文件的示例：

import fs from 'fs';

const sourcePath = 'path/to/source/file';
const destinationPath = 'path/to/destination/file';

fs.copyFile(sourcePath, destinationPath, (err) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log('文件复制成功');
});

在上述示例中，使用fs.copyFile()方法将源文件复制到目标文件。指定源文件路径、目标文件路径和回调函数来处理结果和错误。

3.4 移动文件

若要移动文件，可以使用fs.rename()方法。以下是一个移动文件的示例：

import fs from 'fs';

const sourcePath = 'path/to/source/file';
const destinationPath = 'path/to/destination/file';

fs.rename(sourcePath, destinationPath, (err) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log('文件移动成功');
});

在上述示例中，使用fs.rename()方法将源文件移动到目标文件路径。指定源文件路径、目标文件路径和回调函数来处理结果和错误。

3.5 删除文件

若要删除文件，可以使用fs.unlink()方法。以下是一个删除文件的示例：

import fs from 'fs';

const filePath = 'path/to/file';

fs.unlink(filePath, (err) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log('文件删除成功');
});

在上述示例中，使用fs.unlink()方法删除指定路径的文件。指定文件路径和回调函数来处理结果和错误。

4. Electron 如何建立桌面快捷方式

要在Electron应用程序中创建桌面快捷方式，并通过该快捷方式传递参数，可以按照以下步骤进行操作：

在主进程中引入app和shell模块：

import { app, shell } from 'electron';

在应用程序准备就绪后，通过调用app.setAsDefaultProtocolClient(protocol[, path, args])方法来设置应用程序为默认协议客户端。这将关联应用程序与指定的协议，使得通过该协议启动的链接会打开应用程序。path参数和args参数是可选的，用于指定启动应用程序时传递的路径和参数。

app.on('ready', () => {
  // 设置应用程序为默认协议客户端，并传递参数
  app.setAsDefaultProtocolClient('myapp', process.execPath, ['--myarg']);
});

在上述示例中，我们将应用程序设置为myapp协议的默认客户端，并传递参数--myarg。

创建桌面快捷方式。可以在适当的时机，例如应用程序的安装过程中或用户主动触发创建快捷方式的操作时，调用shell.writeShortcutLink(shortcutPath[, operation], options)方法来创建桌面快捷方式。

import { shell } from 'electron';

const shortcutPath = 'path/to/shortcut.lnk';

shell.writeShortcutLink(shortcutPath, 'create', {
  target: process.execPath,
  args: ['--myarg'],
  workingDirectory: 'path/to/app',
  icon: 'path/to/app/icon.ico',
  description: 'My Electron App Shortcut'
});