Electron 应用中优雅地下载文件：实现进度条和通知

电子应用程序是一个强大的工具，可以创建跨平台桌面应用程序。但是，与 Web 应用程序不同，Electron 应用程序没有内置的文件下载机制。为了提供无缝的文件下载体验，开发人员必须自己实现它。

本文将探讨如何使用 Electron API 和第三方库在 Electron 应用程序中实现文件下载。我们将构建一个简单的应用程序，它允许用户下载文件并显示进度条和通知。

使用 Electron API

第一步是使用 electron 模块创建一个文件下载器。这可以通过以下代码完成：

const { BrowserWindow, app } = require('electron')

// 创建下载文件窗口
const downloadWindow = new BrowserWindow({
  width: 400,
  height: 300,
  show: false,
})

// 监听下载事件
downloadWindow.webContents.session.on('will-download', (event, item, webContents) => {
  // 打开下载文件窗口
  downloadWindow.show()

  // 创建进度条
  const progressbar = document.getElementById('progress-bar')

  // 监听下载进度
  item.on('updated', (event, state) => {
    if (state === 'progressing') {
      // 更新进度条
      progressbar.value = item.getReceivedBytes() / item.getTotalBytes() * 100
    } else if (state === 'completed') {
      // 下载完成，关闭下载文件窗口
      downloadWindow.close()

      // 显示通知
      const notification = new Notification('下载完成', {
        body: `已下载文件：${item.getFilename()}`,
      })
      notification.show()
    }
  })

  // 开始下载
  item.saveTo(app.getPath('downloads'))
})

使用第三方库

除了使用 Electron API，我们还可以使用第三方库来简化文件下载过程。其中一个流行的库是 electron-dl。它提供了一个简单的 API，可以轻松下载文件并显示进度。

使用 electron-dl，上面的代码可以简化为：

const { app } = require('electron')
const electronDl = require('electron-dl')

// 创建下载器
const downloader = electronDl()

// 下载文件
downloader(app.getPath('downloads'), {
  url: 'https://example.com/file.zip',
})
  .then(dl => {
    // 下载完成，显示通知
    const notification = new Notification('下载完成', {
      body: `已下载文件：${dl.getFilename()}`,
    })
    notification.show()
  })
  .catch(err => {
    console.error(err)
  })