Electron-vue实现下载功能

提示：首先在下载文件之前，你需要自己先获得下载地址和下载的名字，然后才可以下载

文章目录

目录

文章目录

一、Electron-vue是什么？

二、使用步骤

2.主进程代码

---

 

一、Electron-vue是什么？

electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。
地址:简介 | electron-vite

二、使用步骤

代码如下（示例）：

前端Vue代码

    let fullDownloadUrl = "下载的地址"
   let fileInfoName = "下载的名字";

   ipcRenderer.send('download-file',{
    fullDownloadUrl,fileInfoName
   })

2.主进程代码

代码如下（示例）：

  ipcMain.on('download-file', async (event, { fullDownloadUrl, fileInfoName }) => {
    // 弹出保存文件对话框，获取保存路径
    const savePath = dialog.showSaveDialogSync(mainWindow, {
      title: '下载文件', // 对话框标题
      defaultPath: fileInfoName, // 默认文件名
    });
  
    // 如果用户选择了保存路径
    if (savePath) {
      try {
        // 发送 GET 请求下载文件，以流的方式接收数据
        const response = await axios.get(fullDownloadUrl, { responseType: 'stream' });
        // 创建文件写入流
        const writer = fs.createWriteStream(savePath);
  
        // 将下载的数据通过管道写入文件
        response.data.pipe(writer);
  
        // 当写入完成时
        writer.on('finish', async () => {
          // 发送回复消息，通知下载成功
          event.reply('download-file-reply', '文件下载成功');
          // 自动打开下载的文件
          await shell.openPath(savePath);
          // 弹出信息提示框，通知用户下载完成
          dialog.showMessageBox(mainWindow, {
            type: 'info', // 信息提示框类型
            title: '下载', // 提示框标题
            message: '恭喜您下载完成', // 提示信息
            buttons: ['确定'] // 按钮文本
          });
        });
  
        // 当写入发生错误时
        writer.on('error', (err) => {
          // 发送回复消息，通知下载失败
          event.reply('download-file-reply', `文件下载失败: ${err.message}`);
          // 弹出错误提示框，通知用户下载失败
          dialog.showMessageBox(mainWindow, {
            type: 'error', // 错误提示框类型
            title: '下载失败', // 提示框标题
            message: `下载失败，错误信息: ${err.message}`, // 提示信息
            buttons: ['确定'] // 按钮文本
          });
        });
      } catch (error) {
        // 捕获其他下载过程中的错误
        event.reply('download-file-reply', `文件下载失败: ${error.message}`);
        dialog.showMessageBox(mainWindow, {
          type: 'error', // 错误提示框类型
          title: '下载失败', // 提示框标题
          message: `下载失败，错误信息: ${error.message}`, // 提示信息
          buttons: ['确定'] // 按钮文本
        });
      }
    } else {
      // 如果用户取消了保存对话框
      event.reply('download-file-reply', '保存对话框已取消');
    }
  });

在这里下载完成之后会自动打开该文件，然后弹框告诉用户下载完成