electron项目中实现视频下载保存到本地

  • 第一种方式:用户自定义选择下载地址位置

渲染进程

javascript 复制代码
// 渲染进程

// 引入
import { ipcRenderer } from "electron";

// 列表行数据下载视频操作,diffVideoUrl 是视频请求地址
handleDownloadClick(row) {
  if (!row.diffVideoUrl) {
    this.$message.error("暂无视频,请稍后重试下载");
  } else {
    //渲染线程主动发送 downloadVideo事件到主线程请求下载视频
    ipcRenderer.send("downloadVideo", row.diffVideoUrl, row.orderCode);
  }
}

主进程

javascript 复制代码
// 主进程

// 引入
import { ipcMain, dialog } from "electron";
import path from "path";
import fs from "fs";
import axios from "axios";

// 监听渲染进程下载视频
ipcMain.on("downloadVideo", async (event, videoUrl, fileName) => {
	let result = await dialog.showOpenDialog({
		properties: ["openDirectory", "createDirectory", "promptToCreate"],
	});
	if (!result.canceled) {
		// 用户选择的路径
		let directoryPath = result.filePaths[0];
		// 获取目标文件的路径
		const destPath = path.join(directoryPath, fileName + ".mp4");
		try {
			// 请求七牛视频地址接口,获取视频
			const response = await axios({
				method: "get",
				url: videoUrl,
				responseType: "stream", // 以流的形式获取响应体,用于写入文件
			});
			// 在用户选择的目标文件路径下创建一个可写流
			const ws = fs.createWriteStream(destPath);
			// 将数据流保存到文件中
			response.data.pipe(ws);
			dialog.showMessageBox(mainWindow, {
				message: "已下载成功!",
				type: "none",
			});
		} catch (error) {
			console.log(error);
			dialog.showMessageBox(mainWindow, {
				message: "下载失败!",
				type: "none",
			});
		}
	}
});
  • 第二种方式:系统内部设置默认下载地址位置

渲染进程

javascript 复制代码
// 渲染进程

// 引入
import { ipcRenderer } from "electron";

// 列表行数据下载视频操作,diffVideoUrl 是视频请求地址
handleDownloadClick(row) {
  if (!row.diffVideoUrl) {
    this.$message.error("暂无视频,请稍后重试下载");
  } else {
    //渲染线程主动发送 downloadVideo事件到主线程请求下载视频
    ipcRenderer.send("downloadVideo", row.diffVideoUrl, row.orderCode);
  }
}

主进程

javascript 复制代码
// 主进程

// 引入
import { app, ipcMain, dialog } from "electron";
import path from "path";
import fs from "fs";
import axios from "axios";

// 监听渲染进程下载视频
ipcMain.on("downloadVideo", async (event, videoUrl, fileName) => {
	// 默认下载到电脑 downloads 目录下
	let directoryPath = app.getPath("downloads");
	// 获取目标文件的路径
	const destPath = path.join(directoryPath, fileName + ".mp4");
	try {
		// 请求七牛视频地址接口,获取视频
		const response = await axios({
			method: "get",
			url: videoUrl,
			responseType: "stream", // 以流的形式获取响应体,用于写入文件
		});
		// 在用户选择的目标文件路径下创建一个可写流
		const ws = fs.createWriteStream(destPath);
		// 将数据流保存到文件中
		response.data.pipe(ws);
		dialog.showMessageBox(mainWindow, {
			message: "已下载成功!",
			type: "none",
		});
	} catch (error) {
		console.log(error);
		dialog.showMessageBox(mainWindow, {
			message: "下载失败!",
			type: "none",
		});
	}
});

代码中相关代码点解释:

mainWindownew BrowserWindow() 创建应用程序窗口,此处省略相关代码,例子代码如下:

javascript 复制代码
// 在主进程中.
const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow({ width: 800, height: 600 })

dialog.showOpenDialog 参考官方文档:dialog.showOpenDialog


app.getPath 参考官方文档:app.getPath

如有其它问题,请在评论区留言,博主看到都会回复的~

相关推荐
Cosolar1 小时前
前端如何实现VAD说话检测?
前端
CodeSheep1 小时前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅1 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒2 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫10 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel11 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼12 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手15 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法15 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架