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

渲染進程

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

主進程

// 主進程// 引入
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",});}}
});

• 第二種方式：系統內部設置默認下載地址位置

渲染進程

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

主進程

// 主進程// 引入
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",});}
});

代碼中相關代碼點解釋：

mainWindow 是 new BrowserWindow（） 創建應用程序窗口，此處省略相關代碼，例子代碼如下：

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

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

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

如有其它問題，請在評論區留言，博主看到都會回復的~