Angular 7中无法通过URL完整下载媒体文件的问题求助

我来帮你搞定这个视频下载的问题！你现在的代码核心问题是直接把URL字符串塞进Blob里了——这相当于把网址本身当成了文件内容，所以下载的只是那串文本的字节，自然只有142字节，根本不是真正的视频文件。

正确的实现思路 #

要下载完整的视频，你需要先通过HTTP请求获取视频的二进制数据，再将这些数据转换成Blob，最后触发下载。这里用Angular自带的HttpClient来处理请求最方便。

完整代码实现 #

首先确保你的模块（比如AppModule）已经导入了HttpClientModule：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他模块...
    HttpClientModule
  ]
})
export class AppModule { }

然后在你的组件里编写下载方法：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  videoUrl = "https://myvio/njk.mp4";

  constructor(private http: HttpClient) {}

  downloadFullVideo() {
    // 发送GET请求获取视频二进制数据，指定responseType为blob
    this.http.get(this.videoUrl, { responseType: 'blob' }).subscribe({
      next: (videoBlob: Blob) => {
        // 创建下载链接元素
        const downloadLink = document.createElement('a');
        const blobUrl = window.URL.createObjectURL(videoBlob);
        
        downloadLink.href = blobUrl;
        downloadLink.download = 'my-video.mp4'; // 自定义下载后的文件名
        downloadLink.target = '_self';

        // 添加到DOM并触发点击
        document.body.appendChild(downloadLink);
        downloadLink.click();

        // 清理资源，避免内存泄漏
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(downloadLink);
      },
      error: (err) => {
        console.error('视频下载失败:', err);
        // 这里可以添加错误提示，比如给用户弹出提示框
      }
    });
  }
}

关键注意点 #

• 跨域问题：如果视频URL和你的Angular项目不在同一个域名下，需要确保视频服务器配置了CORS（Access-Control-Allow-Origin），否则浏览器会阻止请求。
• responseType设置：必须把responseType设为'blob'，这样HttpClient才会返回视频的二进制Blob对象，而不是默认的文本或JSON。
• 资源清理：下载完成后一定要调用window.URL.revokeObjectURL()释放Blob URL占用的内存，避免内存泄漏。

为什么原来的代码无效？ #

你原来的代码里new Blob([this.video])中的this.video是字符串"https://myvio/njk.mp4"，Blob会把这个字符串转换成UTF-8编码的字节，所以生成的文件只是这段文本的二进制形式，大小自然很小，而且完全不是视频数据，所以无法播放。

内容的提问来源于stack exchange，提问作者madu kp