如何强制视频文件下载而非在窗口打开？Angular4+Electron场景

我之前在Electron+Angular项目里也碰到过一模一样的需求——不管用户怎么点链接，都要直接触发下载，绝对不能打开视频。结合你的技术栈，给你几个亲测有效的靠谱方案：

方案一：用Electron官方下载API（最稳定可靠） #

Electron的主进程提供了专门的下载控制能力，我们可以在Angular组件里通过渲染进程调用这个API，完全绕过浏览器的默认规则，100%控制下载行为。

步骤1：配置Electron主进程（针对高版本Electron） #

如果你的Electron版本是10+，默认禁用了remote模块，得先在主进程的BrowserWindow配置里开启相关权限：

// main.js 主进程代码
const { BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      enableRemoteModule: true, // 开启remote模块，允许渲染进程调用主进程API
      contextIsolation: false, // 关闭上下文隔离，让Angular能访问Node.js API
      nodeIntegration: true
    }
  });

  mainWindow.loadURL('http://localhost:4200'); // 替换成你的Angular项目启动地址
}

步骤2：Angular组件中实现下载逻辑 #

在组件TS文件里绑定点击事件，调用Electron的下载方法：

import { Component } from '@angular/core';

// 引入Electron的remote模块
const { remote } = window.require('electron');
const { dialog, BrowserWindow } = remote;

@Component({
  selector: 'app-video-download',
  template: `
    <button (click)="downloadVideo('assets/videos/demo.mp4')">下载MP4视频</button>
    <button (click)="downloadVideo('assets/videos/demo.3gp')">下载3GP视频</button>
  `
})
export class VideoDownloadComponent {
  downloadVideo(videoUrl: string) {
    const currentWindow = BrowserWindow.getFocusedWindow();
    if (!currentWindow) return;

    // 触发Electron的下载请求
    currentWindow.webContents.downloadURL(videoUrl);

    // 监听下载事件，自定义保存路径和状态提示
    currentWindow.webContents.session.once('will-download', (event, downloadItem) => {
      // 弹出保存对话框让用户选择路径
      dialog.showSaveDialog(currentWindow, {
        defaultPath: downloadItem.getFilename(),
        filters: [
          { name: '所有视频文件', extensions: ['mp4', '3gp', 'avi', 'mov'] },
          { name: 'MP4文件', extensions: ['mp4'] },
          { name: '3GP文件', extensions: ['3gp'] }
        ]
      }).then(result => {
        if (!result.canceled) {
          // 设置用户选择的保存路径
          downloadItem.setSavePath(result.filePath);
        } else {
          // 用户取消保存，终止下载
          downloadItem.cancel();
        }
      });

      // 下载完成/失败的回调提示
      downloadItem.on('done', (event, state) => {
        if (state === 'completed') {
          alert('视频下载完成啦！');
        } else {
          alert(`下载失败：${state}`);
        }
      });
    });
  }
}

方案二：拦截标签的默认行为 #

如果你想保留<a>标签的样式，只需要拦截它的点击事件，阻止浏览器默认的打开/跳转行为，再调用上面的下载逻辑就行：

组件模板 #

<a href="assets/videos/demo.mp4" (click)="handleDownload($event, 'assets/videos/demo.mp4')">
  点击下载MP4视频
</a>

组件TS代码 #

handleDownload(event: Event, videoUrl: string) {
  event.preventDefault(); // 彻底阻止浏览器的默认行为（打开视频或新标签页）
  this.downloadVideo(videoUrl); // 调用方案一中的downloadVideo方法
}

为什么不推荐HTML5的download属性？ #

虽然HTML5的download属性能触发下载，但在Electron环境下，对于视频这类浏览器能直接预览的文件，经常会失效（依然会打开视频）。而Electron的官方下载API完全绕过浏览器的默认处理逻辑，是最可靠的强制下载方式。

内容的提问来源于stack exchange，提问作者suraj bora