Question

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

此应用程序的一部分是一个填充了* ngFor的表格，用于显示录制内容和相关信息。表格上的每一行还有一个复选框，用于标记要下载的录音。我已经到了可以控制台.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文件夹并让用户下载

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

1 个答案: