快捷導(dǎo)航

electron項(xiàng)目中實(shí)現(xiàn)視頻下載保存到本地的方式

更新時(shí)間：2024年07月21日 11:19:30 作者：DLGDark

這篇文章主要介紹了electron項(xiàng)目中實(shí)現(xiàn)視頻下載保存到本地的兩種實(shí)現(xiàn)方式,每種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

第一種方式：用戶自定義選擇下載地址位置

渲染進(jìn)程

// 渲染進(jìn)程
// 引入
import { ipcRenderer } from "electron";
// 列表行數(shù)據(jù)下載視頻操作，diffVideoUrl 是視頻請(qǐng)求地址
handleDownloadClick(row) {
  if (!row.diffVideoUrl) {
    this.$message.error("暫無視頻，請(qǐng)稍后重試下載");
  } else {
    //渲染線程主動(dòng)發(fā)送 downloadVideo事件到主線程請(qǐng)求下載視頻
    ipcRenderer.send("downloadVideo", row.diffVideoUrl, row.orderCode);
  }
}

主進(jìn)程

// 主進(jìn)程
// 引入
import { ipcMain, dialog } from "electron";
import path from "path";
import fs from "fs";
import axios from "axios";
// 監(jiān)聽渲染進(jìn)程下載視頻
ipcMain.on("downloadVideo", async (event, videoUrl, fileName) => {
	let result = await dialog.showOpenDialog({
		properties: ["openDirectory", "createDirectory", "promptToCreate"],
	});
	if (!result.canceled) {
		// 用戶選擇的路徑
		let directoryPath = result.filePaths[0];
		// 獲取目標(biāo)文件的路徑
		const destPath = path.join(directoryPath, fileName + ".mp4");
		try {
			// 請(qǐng)求七牛視頻地址接口，獲取視頻
			const response = await axios({
				method: "get",
				url: videoUrl,
				responseType: "stream", // 以流的形式獲取響應(yīng)體，用于寫入文件
			});
			// 在用戶選擇的目標(biāo)文件路徑下創(chuàng)建一個(gè)可寫流
			const ws = fs.createWriteStream(destPath);
			// 將數(shù)據(jù)流保存到文件中
			response.data.pipe(ws);
			dialog.showMessageBox(mainWindow, {
				message: "已下載成功！",
				type: "none",
			});
		} catch (error) {
			console.log(error);
			dialog.showMessageBox(mainWindow, {
				message: "下載失??！",
				type: "none",
			});
		}
	}
});

第二種方式：系統(tǒng)內(nèi)部設(shè)置默認(rèn)下載地址位置

渲染進(jìn)程

// 渲染進(jìn)程
// 引入
import { ipcRenderer } from "electron";
// 列表行數(shù)據(jù)下載視頻操作，diffVideoUrl 是視頻請(qǐng)求地址
handleDownloadClick(row) {
  if (!row.diffVideoUrl) {
    this.$message.error("暫無視頻，請(qǐng)稍后重試下載");
  } else {
    //渲染線程主動(dòng)發(fā)送 downloadVideo事件到主線程請(qǐng)求下載視頻
    ipcRenderer.send("downloadVideo", row.diffVideoUrl, row.orderCode);
  }
}

主進(jìn)程

// 主進(jìn)程
// 引入
import { app, ipcMain, dialog } from "electron";
import path from "path";
import fs from "fs";
import axios from "axios";
// 監(jiān)聽渲染進(jìn)程下載視頻
ipcMain.on("downloadVideo", async (event, videoUrl, fileName) => {
	// 默認(rèn)下載到電腦 downloads 目錄下
	let directoryPath = app.getPath("downloads");
	// 獲取目標(biāo)文件的路徑
	const destPath = path.join(directoryPath, fileName + ".mp4");
	try {
		// 請(qǐng)求七牛視頻地址接口，獲取視頻
		const response = await axios({
			method: "get",
			url: videoUrl,
			responseType: "stream", // 以流的形式獲取響應(yīng)體，用于寫入文件
		});
		// 在用戶選擇的目標(biāo)文件路徑下創(chuàng)建一個(gè)可寫流
		const ws = fs.createWriteStream(destPath);
		// 將數(shù)據(jù)流保存到文件中
		response.data.pipe(ws);
		dialog.showMessageBox(mainWindow, {
			message: "已下載成功！",
			type: "none",
		});
	} catch (error) {
		console.log(error);
		dialog.showMessageBox(mainWindow, {
			message: "下載失?。?,
			type: "none",
		});
	}
});

代碼中相關(guān)代碼點(diǎn)解釋：

mainWindow 是 new BrowserWindow（） 創(chuàng)建應(yīng)用程序窗口，此處省略相關(guān)代碼，例子代碼如下：

// 在主進(jìn)程中.
const { BrowserWindow } = require('electron')
const mainWindow = new BrowserWindow({ width: 800, height: 600 })

dialog.showOpenDialog 參考官方文檔：dialog.showOpenDialog

app.getPath 參考官方文檔：app.getPath

到此這篇關(guān)于electron項(xiàng)目中實(shí)現(xiàn)視頻下載保存到本地的文章就介紹到這了,更多相關(guān)electron視頻下載保存到本地內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: