Загрузка файла через Angular 2

У меня есть бэкэнд, который я создал, чтобы вернуть файл, установив заголовок

Content-Disposition: attachment;filename=somefile.csv

Он работает непосредственно в браузере и сразу же загружает файл после вызова URL-адреса, указывающего на этот ресурс.

Моя цель - создать кнопку в шаблоне Angular 2. Когда пользователь нажимает на эту кнопку, мне нужно будет собрать некоторые данные с клиентской стороны (некоторые идентификаторы) и отправить ее на сервер, чтобы вызвать этот URL загрузки файла.

Я хотел бы, чтобы пользователь оставался на одной странице и не открывал новые вкладки, но просто загружал файл (например, когда URL-адрес вызывается напрямую).

Это нужно сделать с помощью запроса POST, потому что у меня может быть довольно много данных для отправки, чтобы определить, какой ресурс необходимо загрузить.

Как выглядит вызов на стороне Angular 2? Я пробовал пару вещей, но я, очевидно, ошибаюсь.

Любая помощь будет оценена!

Ответ 1

У меня была аналогичная проблема, когда я пытался загрузить файл PDF, который отправлял мой сервер Node. Я делал запрос GET на моем сервере с некоторыми подробностями идентификатора. Это то, что сработало для меня.

Функция Вызов моей службы

printBill(receiptID) {
this.BillingService.printBill(receiptID)
    .subscribe(res => {
        saveAs(res,"InvoiceNo"+receiptID+".pdf");
        let fileURL = URL.createObjectURL(res);
        window.open(fileURL);
    })
}

Сервис

printBill(billID) {
    return this.http.get('/billing/receipt/'+billID, 
                   { responseType: ResponseContentType.Blob })
      .map((res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        })
}

И не забудьте импортировать ResponseContentType

Надеюсь, это поможет вам

Ответ 2

Я реализовал его следующим образом.

У меня есть служба, запрашивающая загрузку файла. Ответ возвращает URL-адрес, который находится на amazon s3. Это zip файл, содержащий то, что я хочу загрузить.

ниже работает во всех браузерах.

в вашем контроллере

requestDownload() {

this.downloadservice.downloadImages(obj)
      .subscribe(
        response => this.download(response )
      );

}

// res is an object
download(res){ 
    var link = document.createElement("a");
    link.download = "a";
    link.href = res.link;
    document.body.appendChild(link);
    link.click();

     }

файл загрузчика

downloadImages(body): Observable<any>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http.post("/Camera51Server/getZippedImages", body, options)
            .map((res:Response) => res.json())
            .catch(this.handleError);
    }

если вам нравится, я могу дать вам ссылку на репозиторий.