乐趣区

关于html:Electron-Playground-系列文件下载篇

作者:long.woo

文件下载是咱们开发中比拟常见的业务需要,比方:导出 excel。

web 利用文件下载存在一些局限性,通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf,触发浏览器的下载行为。

在 electron 中的下载行为,都会触发 session 的 will-download 事件。在该事件外面能够获取到 downloadItem 对象,通过 downloadItem 对象实现一个简略的文件下载管理器:

1. 如何触发下载

因为 electron 是基于 chromium 实现的,通过调用 webContents 的 downloadURL 办法,相当于调用了 chromium 底层实现的下载,会疏忽响应头信息,触发 will-download 事件。

// 触发下载
win.webContents.downloadURL(url)

// 监听 will-download
session.defaultSession.on('will-download', (event, item, webContents) => {})

2. 下载流程

3. 功能设计

实现一个简略的文件下载管理器性能蕴含:

  • 设置保留门路
  • 暂停 / 复原和勾销
  • 下载进度
  • 下载速度
  • 下载实现
  • 关上文件和关上文件所在位置
  • 文件图标
  • 下载记录

3.1 设置保留门路

如果没有设置保留门路,electron 会自动弹出零碎的保留对话框。不想应用零碎的保留对话框,能够应用 setSavePath 办法,当有重名文件时,会间接笼罩下载。

item.setSavePath(path)

为了更好的用户体验,能够让用户本人抉择保留地位操作。当点击地位输入框时,渲染过程通过 ipc 与主过程通信,关上系统文件抉择对话框。

主过程实现代码:

/**
 * 关上文件抉择框
 * @param oldPath - 上一次关上的门路
 */
const openFileDialog = async (oldPath: string = app.getPath('downloads')) => {if (!win) return oldPath

  const {canceled, filePaths} = await dialog.showOpenDialog(win, {
    title: '抉择保留地位',
    properties: ['openDirectory', 'createDirectory'],
    defaultPath: oldPath,
  })

  return !canceled ? filePaths[0] : oldPath
}

ipcMain.handle('openFileDialog', (event, oldPath?: string) => openFileDialog(oldPath))

渲染过程代码:

const path = await ipcRenderer.invoke('openFileDialog', 'PATH')

3.2 暂停 / 复原和勾销

拿到 downloadItem 后,暂停、复原和勾销别离调用 pauseresumecancel 办法。当咱们要删除列表中正在下载的项,须要先调用 cancel 办法勾销下载。

3.3 下载进度

在 DownloadItem 中监听 updated 事件,能够实时获取到已下载的字节数据,来计算下载进度和每秒下载的速度。

// 计算下载进度
const progress = item.getReceivedBytes() / item.getTotalBytes()


在下载的时候,想在 Mac 零碎的程序坞和 Windows 零碎的任务栏展现下载信息,比方:

  • 下载数:通过 app 的 badgeCount 属性设置,当为 0 时,不会显示。也能够通过 dock 的 setBadge 办法设置,该办法反对的是字符串,如果不要显示,须要设置为 ”。
  • 下载进度:通过窗口的 setProgressBar 办法设置。

因为 Mac 和 Windows 零碎差别,下载数仅在 Mac 零碎中失效。加上 process.platform === ‘darwin’ 条件,防止在非 Mac、Linux 零碎下出现异常谬误。

下载进度(Windows 零碎任务栏、Mac 零碎程序坞)显示成果:

// mac 程序坞显示下载数:// 形式一
app.badgeCount = 1
// 形式二
app.dock.setBadge('1')

// mac 程序坞、windows 任务栏显示进度
win.setProgressBar(progress)

3.4 下载速度

因为 downloadItem 没有间接为咱们提供办法或属性获取下载速度,须要本人实现。

思路:在 updated 事件里通过 getReceivedBytes 办法拿到本次下载的字节数据减去上一次下载的字节数据。

// 记录上一次下载的字节数据
let prevReceivedBytes = 0

item.on('updated', (e, state) => {const receivedBytes = item.getReceivedBytes()
  // 计算每秒下载的速度
  downloadItem.speed = receivedBytes - prevReceivedBytes
  prevReceivedBytes = receivedBytes
})

须要留神的是,updated 事件执行的工夫约 500ms 一次。

3.5 下载实现

当一个文件下载实现、中断或者被勾销,须要告诉渲染过程批改状态,通过监听 downloadItem 的 done 事件。

item.on('done', (e, state) => {
  downloadItem.state = state
  downloadItem.receivedBytes = item.getReceivedBytes()
  downloadItem.lastModifiedTime = item.getLastModifiedTime()

  // 告诉渲染过程,更新下载状态
  webContents.send('downloadItemDone', downloadItem)
})

3.6 关上文件和关上文件所在位置

应用 electron 的 shell 模块来实现关上文件(openPath)和关上文件所在位置(showItemInFolder)。

因为 openPath 办法反对返回值 Promise<string>,当不反对关上的文件,零碎会有相应的提醒,而 showItemInFolder 办法返回值是 void。如果须要更好的用户体验,可应用 nodejs 的 fs 模块,先查看文件是否存在。

import fs from 'fs'

// 关上文件
const openFile = (path: string): boolean => {if (!fs.existsSync(path)) return false

  shell.openPath(path)
  return true
}

// 关上文件所在位置
const openFileInFolder = (path: string): boolean => {if (!fs.existsSync(path)) return false

  shell.showItemInFolder(path)
  return true
}

3.7 文件图标

很不便的是应用 app 模块的 getFileIcon 办法来获取零碎关联的文件图标,返回的是 Promise<NativeImage> 类型,咱们能够用 toDataURL 办法转换成 base64,不须要咱们去解决不同文件类型显示不同的图标。

const getFileIcon = async (path: string) => {
  const iconDefault = './icon_default.png'
  if (!path) Promise.resolve(iconDefault)

  const icon = await app.getFileIcon(path, {size: 'normal'})

  return icon.toDataURL()}

3.8 下载记录

随着下载的历史数据越来越多,应用 electron-store 将下载记录保留在本地。


对 Electron 感兴趣?请关注咱们的开源我的项目 Electron Playground,带你极速上手 Electron。

咱们每周五会精选一些有意思的文章和音讯和大家分享,来掘金关注咱们的 晓前端周刊。


咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。

退出移动版