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

文章目录

目录

文章目录

一、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', '保存对话框已取消');
    }
  });

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

GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079 [skip ci] 3 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐