通过 Angular ui 保存的文件名称

Question

在我的角度应用程序中，有一个下载文件的功能。

当用户单击文件下载按钮时，将打开“另存为”窗口，然后用户可以为该文件设置名称并保存。

我想知道用户设置的文件的名称。

我知道无法检索完整路径，如本->中所述 -> 使用 javascript 获取浏览器下载路径，并且我不需要完整路径，我只需要文件名。

更新：我想知道.ts（组件）文件中的文件名，并在html文件中的标签标记中显示该名称。

有什么办法吗？

Answer 1

我解决了使用 File System API

创建的问题

请参阅以下代码以供参考

public async buttonClick() {
      try {
        const fileHandle = await this.getNewFileHandle();
        if (fileHandle) {
          console.log("after calling getNewFileHandle()");
          console.log(fileHandle.name);  // Got the filename here
          this.filename = fileHandle.name;
        }
      } catch (error) {
        if (error instanceof DOMException) {
          switch (error.name) {
            case 'NotAllowedError':
              console.error("Permission was denied.");
              break;
            case 'AbortError':
              console.error("The operation was aborted.");
              break;
            case 'SecurityError':
              console.error("Security error occurred.");
              break;
            case 'TypeError':
              console.error("Invalid options were provided.");
              break;
            default:
              console.error("An unknown DOMException occurred:", error);
          }
        } else {
          console.error("An unknown error occurred:", error);
        }
      }
    }
    
    getNewFileHandle() {
      let opts={};
      if ('showSaveFilePicker' in window) {
        opts = {
          types: [
            {
              description: 'Text file',
              accept: { 'text/plain': ['.txt'] },
            },
          ],
        };
        return window.showSaveFilePicker(opts);
      }
     else{}
    }