Как вставить blob (ответ от сервера) в ngx-extended-pdf-viewer? - PullRequest
0 голосов
/ 21 декабря 2018

Я устанавливаю новый вид, который содержит просмотрщик PDF.У меня нет пути к файлу PDF, просто сервер возвращает мне объект BLOB-объекта, который содержит PDF, и я должен показать этот PDF-файл.Сейчас я использую библиотеку ngx-extended-pdf-viewer (ссылка: https://www.npmjs.com/package/ngx-extended-pdf-viewer)

) Теперь мне нужно использовать ответ от сервера (который возвращает BLOB) и отобразить файл. Я попытался приписатьОтветьте на переменную, затем используйте ее внутри HTML с асинхронным каналом. Затем попробуйте добавить новый объект FileReader, передать внутри него blob и поместить его в свойство [src]. В этих двух случаях браузер не показывает pdf и не загружает его напрямую.

Мои все попытки: https://ghostbin.com/paste/57akz

Отредактировано: https://ghostbin.com/paste/rb8ou

Я просто хочу использовать внутри [src] мой объект BLOB и правильно отображать файл PDF, не загружая егои т.д.

1 Ответ

0 голосов
/ 04 июня 2019

Несмотря на то, что я еще не использовал вышеупомянутую библиотеку, я довольно успешно работал с объектами BLOB и ng2-pdfjs-viewer (https://www.npmjs.com/package/ng2-pdfjs-viewer) при создании интенсивного портала в формате PDF.

Вариант использования для BLOB-объектовобъекты как

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</button>
<!-- your.component.ts-->
export class SampelComponent implements OnInit {
  @ViewChild('pdfViewer') pdfViewer
  ...

  private downloadFile(url: string): any {
    return this.http.get(url, { responseType: ResponseContentType.Blob }).map(
      (res) => {
        return new Blob([res.blob()], { type: "application/pdf" });
      });
  }

  public openPdf() {
    let url = "url to fetch pdf as byte array"; (Blob works here)
    this.downloadFile(url).subscribe(
     (res) => {
        this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
        this.pdfViewer.refresh(); // Ask pdf viewer to load/reresh pdf
      }
    );
  }
...