Angular 5- PDF документ, скачать и показать в новом окне

Question

Я работаю в Angular в качестве внешнего интерфейса и получаю данные из REST Full Web Service.1) Мне нужно показать pdf-файл в новом окне веб-браузера, в который я получаю данные из веб-сервиса в качестве базы 64.

Проблема: Я могу загрузить файлно когда я пытаюсь открыть файл в новом окне, его показ (ОШИБКА: не удалось загрузить содержимое PDF).Вот мой код:

service:

this.http.get('https://localhost:44364/api/v1/source/GetImage/parameter1/animal.pdf', { responseType:'arraybuffer' })
    .subscribe(response => {
    var file = new Blob([response], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);

    this.content=this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);
});

HTML: В HTML я использовал IFRAME для отображения pdf-данных

iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="content"

Может ли кто-нибудь помочь мне, пожалуйста.Спасибо

Answer 1

Для того, чтобы скачать файл PDF, вы можете попробовать этот код ниже.Вы не можете открыть PDF-файл на рабочем столе.

  this.httpClient.get('../assets/sample.pdf', { responseType: 'arraybuffer' 
    }).subscribe(response => {
      console.log(response);

      const file = new Blob([response], {type: 'application/pdf'});
      const fileURL = window.URL.createObjectURL(file);
      /*const link = document.createElement('a');
      link.href = fileURL;
      link.download = 'sample.pdf';
      link.click();*/
      if (window.navigator.msSaveOrOpenBlob) {
           window.navigator.msSaveOrOpenBlob(file, fileURL.split(':')[1] + '.pdf');
      } else {
           window.open(fileURL);
      }
   });

}

Answer 2

Если вы хотите отобразить файл PDF формата 64, вы можете использовать мой компонент https://www.npmjs.com/package/ng2-image-viewer

Он работает с Angular 2+ и визуализирует изображения Base 64, URL-изображения и Base 64 PDF, это легко реализовать, вам просто нужно:

1) Выполнить npm install ng2-image-viewer --save

2) Добавить эти коды в ваш файл angular-cli.json:

"styles": [
     "../node_modules/ng2-image-viewer/imageviewer.scss"
],
"scripts": [
     "../node_modules/ng2-image-viewer/imageviewer.js"
],

3) ИмпортImageViewerModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4) Теперь вы можете использовать его по своему усмотрению:

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

Вот демонстрационная версия Ng2-Image-Viewer Showcase

Для получения дополнительной информации вы можете проверить ссылку выше:)

Answer 3

Если открытие файла в новом окне не является проблемой, и вы используете современный браузер, такой как chrome, они могут автоматически обрабатывать pdf,

window.open(URL, '_blank');

, если вам нужно проделать всю эту работувручную вы можете использовать пакеты npm, такие как,

https://www.npmjs.com/package/ng2-pdf-viewer

, если у вас нет особых требований от просмотра PDF, таких как экспорт почты и т. д., вы можете использовать элементы HTML

<embed src="file_name.pdf" width="800px" height="2100px" />

Убедитесь, чтоизменить ширину и высоту для ваших нужд.Удачи!