javascript - 如何使用 Angular 2 触发文件下载？

Question

我正在创建一个应用程序来浏览和下载电话录音。

此应用程序的一部分是一个用 *ngFor 填充的表，用于显示录音和相关信息。表格上的每一行还有一个复选框，用于标记要下载的录音。我已经达到了可以通过 console.log 记录我正在使用的测试 mp3 的链接的程度，但我无法弄清楚如何实际触发所述 mp3 的下载。

我真的很希望能够使用 Typescript 来完成此操作，而不使用 jQuery。

<table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" [checked]="isAllChecked()" (change)="checkAll($event)"> </th>
                <th>Date</th>
                <th>Time</th>
                <th>Duration</th>
                <th>Calling Number</th>
                <th>Called Number</th>
                <th> </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let entry of recordingsList">
                <td>
                    <input type="checkbox" [(ngModel)]="entry.isSelected"> </td>
                <td>{{entry.date}}</td>
                <td>{{entry.time}}</td>
                <td>{{entry.duration}}</td>
                <td>{{entry.callingNumber}}</td>
                <td>{{entry.calledNumber}}</td>
                <td>
                    <button (click)="openPlayer(entry)" class="play-button"><i class="material-icons">play_arrow</i></button>
                </td>
            </tr>
        </tbody>
    </table>

-

// Download selected recordings

    downloadSelected() {
        let isSelected = this.recordingsList.filter(x => x.isSelected);
        isSelected.forEach(x => console.log(x.audio));
    }

-

非常感谢任何帮助。

Answer 1

直接回答问题，您可以为每个链接打开新标签:

downloadSelected() {
        let isSelected = this.recordingsList.filter(x => x.isSelected);
        isSelected.forEach(x => window.open(x.audio, '_blank'));
    }

但是，对于疯狂打开多个选项卡的用户体验而言，这并不优雅。因此，我建议您创建特殊的网址(例如:example.com/bulk-download?ids=1,34,56)，用于创建包含所选文件的 zip 文件夹并让用户下载