electron 下载文件

electron 下载文件

主进程

  • 在 utils 文件夹下创建 download.js,复制下面代码
const { ipcMain, dialog, shell } = require('electron')
const path = require('path')

exports.initDownload = function (win) {
  let downloadObj = {
    downloadPath: '', // 要下载的链接或文件
    fileName: '', // 要保存的文件名,需要带文件后缀名
    savedPath: '' // 要保存的路径
  }
  function resetDownloadObj() {
    downloadObj = {
      downloadPath: '',
      fileName: '',
      savedPath: ''
    }
  }
  // 监听渲染进程发出的download事件
  ipcMain.on('download', (evt, args) => {
    downloadObj.downloadPath = args.downloadPath
    downloadObj.fileName = args.fileName
    let ext = path.extname(downloadObj.fileName)
    let filters = [{ name: '全部文件', extensions: ['*'] }]
    if (ext && ext !== '.') {
      filters.unshift({
        name: '',
        extensions: [ext.match(/[a-zA-Z]+$/)[0]]
      })
    }
    // 弹出另存为弹框,用于获取保存路径
    dialog
      .showSaveDialog(win, {
        filters,
        defaultPath: downloadObj.fileName
      })
      .then((result) => {
        downloadObj.savedPath = result.filePath
        if (downloadObj.savedPath) {
          win.webContents.downloadURL(downloadObj.downloadPath) // 触发will-download事件
        }
      })
      .catch(() => {})
  })

  win.webContents.session.on('will-download', (event, item) => {
    //设置文件存放位置
    item.setSavePath(downloadObj.savedPath)
    item.on('updated', (event, state) => {
      if (state === 'interrupted') {
        console.log('Download is interrupted but can be resumed')
      } else if (state === 'progressing') {
        if (item.isPaused()) {
          console.log('Download is paused')
        } else {
          console.log(`Received bytes: ${item.getReceivedBytes()}`)
        }
      }
    })
    item.once('done', (event, state) => {
      if (state === 'completed') {
        console.log('Download successfully')
        shell.showItemInFolder(downloadObj.savedPath) // 下载成功后打开文件所在文件夹
      } else {
        console.log(`Download failed: ${state}`)
      }
      resetDownloadObj()
    })
  })
}
  • main.js中引入上面导出的函数
const { initDownload } = require('./download')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('./index.html')
  initDownload(win) // 初始化下载,这里需要传入创建的BrowserWindow对象
}

渲染进程

  • 使用ipcRenderer向主进程发送消息,消息名称叫download,传递参数为一个对象,里面包括下载的链接和文件名
const { ipcRenderer } = window.require('electron')

ipcRenderer.send('download', {
  downloadPath: 'https://unpkg.com/vue@3.0.7/dist/vue.global.js', // 下载链接(以下载vue文件为例)
  fileName: 'vue.global.js' // 下载文件名,需要包含后缀名
})
  • 发送download消息后,会弹出另存为弹框

在这里插入图片描述

  • 选择路径保存后,就会开始下载

在这里插入图片描述

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

王乔治威尔金斯玛格丽特汤姆森希尔德萨拉阳

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值