如何在Angular组件中获取用户自定义的下载文件名？

由于浏览器的安全限制，无法直接捕获系统“另存为”对话框中用户自定义的文件名，因此需要换一种思路：先让用户在页面输入自定义文件名，再基于该文件名触发下载操作，同时将输入的文件名绑定到页面的label中展示。

步骤1：组件HTML模板 #

添加文件名输入框、下载按钮和用于显示的label，利用Angular双向绑定绑定文件名变量：

<div>
  <label>自定义文件名：</label>
  <input type="text" [(ngModel)]="customFileName" placeholder="请输入文件名（包含后缀）">
  <button (click)="triggerDownload()">下载文件</button>
</div>
<p>当前设置的文件名：<span *ngIf="customFileName">{{customFileName}}</span></p>

步骤2：组件TS逻辑 #

定义文件名变量，编写下载函数，将用户输入的文件名作为下载时的文件名：

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

@Component({
  selector: 'app-download-demo',
  templateUrl: './download-demo.component.html',
  styleUrls: ['./download-demo.component.css']
})
export class DownloadDemoComponent {
  // 绑定用户输入的文件名，可设置默认值
  customFileName = '默认文件名.txt';

  triggerDownload() {
    // 模拟要下载的文件内容，实际项目中可替换为后端返回的文件流
    const fileContent = '这是测试下载的文件内容';
    const blob = new Blob([fileContent], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    
    // 创建a标签触发下载，设置download属性为用户输入的文件名
    const a = document.createElement('a');
    a.href = url;
    a.download = this.customFileName;
    document.body.appendChild(a);
    a.click();
    
    // 清理资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }
}

关键说明 #

1. 双向绑定[(ngModel)]需要确保已导入FormsModule到你的模块中，否则无法生效。
2. 如果你的下载文件是从后端获取的流，只需要将blob替换为后端返回的Blob对象即可，核心是将a.download设置为用户输入的文件名。
3. 这种方式既满足了用户自定义文件名的需求，又能直接获取到文件名并展示在页面上，同时规避了浏览器安全限制带来的问题。

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