Угловое связывание 6+ [src] в ngx-extended-pdf-viewer - PullRequest
Новая
       36

Угловое связывание 6+ [src] в ngx-extended-pdf-viewer

1 голос
/ 20 марта 2019

Я использую ngx-extended-pdf-viewer ( npm ) для рендеринга PDF, и он работает, когда я непосредственно задаю путь + имя_файла, как показано ниже: 

 <ngx-extended-pdf-viewer [src]="'assets/example.pdf'" 
            [showPrintButton]="false" [showBookmarkButton]="false"
            [showOpenFileButton]="false" 
            [showSidebarOnLoad]="false"
            [showSidebarButton]="true" 
            delayFirstView="6000" useBrowserLocale="false">
          </ngx-extended-pdf-viewer>

Я хотел бы создать переменную в .TS и связать ее в [src], как показано ниже:

Машинопись 

...
ngOnInit() {
    this.filePathAndName = "'assets/example.pdf'";
...

HTML 

 <ngx-extended-pdf-viewer [src]="{{filePathAndName}}" 
            [showPrintButton]="false" [showBookmarkButton]="false"
            [showOpenFileButton]="false" 
            [showSidebarOnLoad]="false"
            [showSidebarButton]="true" 
            delayFirstView="6000" useBrowserLocale="false">
          </ngx-extended-pdf-viewer>

Но это не работает.

Основная проблема заключается в том, что [ src ] должен иметь два символа: Кавычки ("), следующие за апострофом (') ..."' путь + имя '"(без пробелов)

Мой вопрос таков: как я могу поместить допустимое значение в переменную в Typescript для правильного отображения в HTML в этом конкретном сценарии?

Ответы [ 2 ]

2 голосов
/ 20 марта 2019

Эти кавычки не нужны.Это только для буквенных привязок строк.Попробуйте это: 

this.filePathAndName = "assets/example.pdf";

<ngx-extended-pdf-viewer *ngIf="filePathAndName" [src]="filePathAndName"
0 голосов
/ 10 июля 2019

Может быть поздно, чтобы ответить, будет полезно для кого-то в будущем.

HTML код: 

  <ngx-extended-pdf-viewer *ngIf="currentPdf"
    [src]="currentPdf" useBrowserLocale="false"
    style="height: 100%; width: 100%"
    [delayFirstView]="1000"
    [showHandToolButton]="true"
    [handTool] = false>
  </ngx-extended-pdf-viewer>

Машинописный код:

public currentPdf: строка 

displayPdf() {

    // setTimeout(() => {
      this.service.getPdfExtractedContent(this.id)
        .pipe(first())
        .subscribe(
          data => {
            this.currentPdf = URL.createObjectURL(this.b64toBlob(data.ExtractedByte,'data:application/pdf;base64', 1024));

          },
          error => {
            console.log(error);
          }
        );
    // }, 500);

  }


  b64toBlob(b64Data, contentType, sliceSize) {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }
...