Невозможно отобразить файл PDF в приложении Angular

Question

У меня есть файл PDF, хранящийся в каталоге в приложении (assets/pdf/fileName.pdf). Мне нужно отобразить его на новой вкладке по нажатию кнопки из диалогового окна.

Вот что я имею, посмотрев на разные ответы:

В * .component.ts:

  openPDF() {
    this.myService.fetchPDF().subscribe(
      res => {
        let file = new window.Blob([res], {type: 'application/pdf'});
        let fileURL = window.URL.createObjectURL(file);
        window.open(fileURL, '_blank');
      }
    );
  }

В * .service.ts:

  fetchPDF(): any {
    const path = 'assets/pdf/fileName.pdf';
    return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
  }

Я уже пытался использовать responseType : 'arraybuffer', но это тоже не сработало.

Вот темы, на которые я смотрел:

• Как отобразить блоб (.pdf) в приложении AngularJS
• Angular 2, загрузить PDF из API и отобразить его в представлении
• PDF Blob - всплывающее окно не отображает содержимое
• Не удалось загрузить документ PDF - Angular JS - BLOB

Answer 1

Я не уверен, почему вы используете httpClient. Вы можете получить желаемый результат с помощью следующего кода

In * .service.ts:

fetchPDF(): any {
  const path = 'assets/pdf/fileName.pdf'
  return path;
}

In * .component.ts:

openPDF() {
  window.open(this.myService.fetchPDF(), '_blank');
}

Answer 2

Вам понадобится либо использовать тег для вставки html (скорее всего, также с использованием безопасной трубы), средство просмотра PDF (например, Google PDF Viewer), либо вы можете открыть PDF-файл на новой вкладке (это более распространенная форма). подход я вижу). Это зависит от ваших предпочтений.