[UI] 文字檔案下載呈現方式

 

 moduleFilesArray: any[] | null | undefined = [];

  <ng-container *ngFor="let row of moduleFilesArray; let i = index">

          <div class="m-1">

            <a

              mat-button

              target="_blank"

              class="underline text-lg"

              (click)="downloadHistroyTemplate(i)"

              >{{ row }}</a

            >

          </div>

        </ng-container>

  downloadHistroyTemplate(fileId: number) {

    const getName = this.moduleFilesArray?.[fileId].fileName;

    const myDownReq: ModuleHistory = {

      fileName: getName,

      moduleType: this.templateSearchForm.controls['moduleType'].value,

    };

    const params = {

      body: myDownReq,

    };

    this.moduleService

      .moduleDownloadModuleHistory$Json$Response(params)

      .pipe()

      .subscribe({

        next: res => {

          const fileContent = res.body;

          // 將檔案內容轉換成Blob格式

          this.fileBlob = new Blob([fileContent as unknown as Blob], {

            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

          });

          // 取得res的文件名

          let resFileDisposition = res.headers.get('content-disposition');

          let resFileType = res.headers.get('content-type');

          const resFileName = decodeURIComponent(

            this.fileNameService.getFilenameFromHeader(resFileDisposition)!,

          );

          if (resFileName && resFileType) {

            this.fileDownloadService.downloadFile(

              this.fileBlob,

              resFileType,

              resFileName,

            );

          }

        },

        error: err => {

          // 開啟 訊息視窗

          this.dialog.open(AlertDialogComponent, {

            width: '90%',

            disableClose: true,

            autoFocus: false,

            data: {

              fieldTypeName: 'loginerror',

              alertTitle: '執行失敗',

              alertContent: `${err.error} `,

            },

          });

        },

      });

  }