Angular2 Просмотр PDF

У меня есть проект angular2 с ASP.Net Web API. У меня есть код для извлечения пути к файлу из моей базы данных, который идет на документ на моем сервере. Затем я хочу отобразить этот документ в браузере на новой вкладке. Есть ли у кого-нибудь предложения, как это сделать?

Я рад получить файл либо в Angular2 (Typcript), либо в моем API и потоке.

Это моя попытка получить его в моем API, но я не могу понять, как его получить в Angular2 и отобразить его правильно:

public HttpResponseMessage GetSOP(string partnum, string description)
    {
        var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path;
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(sopPath, FileMode.Open);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

Любая помощь будет принята с благодарностью.

Большое спасибо!!!

Ответ 1

Прежде всего, вам нужно установить параметры для вашего HTTP-запроса - установите responseType на ResponseContentType.Blob, используйте blob() для чтения ответа как blob и установите его тип в application/pdf:

downloadPDF(): any {
    return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
    (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

Затем, чтобы получить файл, вам необходимо subscribe на него, и вы можете создать новый ObjectURL и использовать window.open() для открытия PDF на новой вкладке:

this.myService.downloadPDF().subscribe(
        (res) => {
        var fileURL = URL.createObjectURL(res);
        window.open(fileURL);
        }
    );

Ответ 2

Угловой v.5.2.1 ответ:

В *.services.ts

downloadPDF(): any {
    return this._httpClient.get(url, { responseType: 'blob'})
            .map(res => {
            return new Blob([res], { type: 'application/pdf', });
        });
  }

А затем в *.component.ts

downloadPDF() {
    let tab = window.open();
    this._getPdfService
      .downloadPDF()
      .subscribe(data => {
        const fileUrl = URL.createObjectURL(data);
        tab.location.href = fileUrl;
      });
  }

Его важно инициировать и открывать новую вкладку перед вызовом службы. Затем установите этот URL-адрес вкладок в файл.

Ответ 3

УГЛОВЫЕ 5

У меня была та же проблема, что я потерял несколько дней на этом.

Здесь мой ответ может помочь другим, которые помогли сделать pdf.

Для меня, даже если я упоминаю в качестве responseType: "arraybuffer", он не смог его принять.

Для этого вам нужно указать в качестве responseType: 'arraybuffer' как 'json'. (Ссылка)

Рабочий код

service.ts

downloadPDF(): any {
return this._httpClient.get(url, { responseType: 'blob' as 'json' })
        .map(res => {
        return new Blob([res], { type: 'application/pdf', });
    });

}

component.ts

this.myService.downloadPDF().subscribe(
    (res) => {
    var fileURL = URL.createObjectURL(res);
    window.open(fileURL);
    }
);

Ссылка на приведенную ниже ссылку

https://github.com/angular/angular/issues/18586