Печать с использованием ngx-extended-pdf-viewer на iOS и Mobile Safari или Chrome - PullRequest
Новая
       30

Печать с использованием ngx-extended-pdf-viewer на iOS и Mobile Safari или Chrome

2 голосов
/ 01 апреля 2019

У меня есть приложение Angular 7, которое использует ngx-extended-pdf-viewer для рендеринга PDF, который я получаю в виде байтового массива из web.api.У меня нет проблем с рендерингом PDF или даже печатью из любого настольного приложения.ngx-extended-pdf-viewer как встроенная кнопка печати. ​​Однако при попытке печати из Safari на iPhone (iOS 12) он печатает только пустую страницу с URL-адресом внизу.Фактический PDF не печатается.С Chrome на iOS он не делает ничего, что я вижу.Я довольно новичок в Angular и на самом деле в разработке мобильных веб-приложений, поэтому, возможно, мне не хватает знаний. Средство просмотра PDF находится на вкладке mat, поэтому не уверен, что, может быть, это вызывает некоторые проблемы ??

Я пробовал другие пакеты, но все они, кажется, основаны на том жеpdf.js код от Mozilla.Также это единственный, который я нашел, который имеет печать.Я думал о том, чтобы, возможно, попробовать pdf.js вне пакета npm, но до сих пор не нашел четких указаний, как заставить это работать в Angular.Я уверен, что так и будет, но все направления, которые я нашел, похоже, опускают детали.Например, вставьте этот код в свое приложение.Они просто не могут сказать, где в приложении.

Из web.api: 

[HttpPost("GetPdfBytes/{PdfId}")]
public ActionResult<byte[]> GetPdfBytesId([FromBody]int id)
{
    string exactPath = string.Empty;
    if (id == 1)
    {
        exactPath = Path.GetFullPath("pdf-test.pdf");
    }
    else if (id == 2)
    {
        exactPath = Path.GetFullPath("DPP.pdf");
    }
    else if (id == 3)
    {
        exactPath = Path.GetFullPath("Request.pdf");

    }
    else
    {
        exactPath = Path.GetFullPath("Emergency Issue.pdf");

    }
    byte[] bytes = System.IO.File.ReadAllBytes(exactPath);
    return Ok(bytes);

}

HTML: 

<mat-tab label="PDF">
  <ng-template matTabContent>
      <ngx-extended-pdf-viewer *ngIf="visible[2]" id="pdf3" [src]="pdfSrc3" useBrowserLocale="true" delayFirstView="1000" showSidebarButton="false"
      showOpenFileButton="false" >
      </ngx-extended-pdf-viewer>
  </ng-template>
</mat-tab>

Машинопись: 

getPDFBytesId(id: string) {
  this.getPDFFromServicePdfBytesId(Number(id)).subscribe(
    (data: any) => {
        this.pdfSrc3 = this.convertDataURIToBinary(data);
   },
   error => {
       console.log(error);
   }
 );
}

// hits the web.api

getPDFFromServicePdfBytesId(id: number): Observable<any> {
  const body = id;
  return this.http.post<any>('http://localhost:5000/api/values/GetPdfBytes/' + id, body);
}

// converts what we got back to a Uint8Array which is used by the viewer

convertDataURIToBinary(dataURI: string) {
  const raw = window.atob(dataURI);
  const rawLength = raw.length;
  const array = new Uint8Array(new ArrayBuffer(rawLength));

  for (let i = 0; i < rawLength; i++) {
  array[i] = raw.charCodeAt(i);
  }
  return array;
}
...