Electron-vue实现下载功能

本文主要是介绍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', '保存对话框已取消');}});

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

这篇关于Electron-vue实现下载功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---