首页 > 解决方案 > 在 iOS 和 Mobile Safari 或 Chrome 上使用 ngx-extended-pdf-viewer 进行打印

问题描述

我有一个 Angular 7 应用程序,它使用 ngx-extended-pdf-viewer 来呈现我从 web.api 作为字节数组获得的 PDF。渲染 PDF 甚至从任何桌面应用程序打印它都没有问题。ngx-extended-pdf-viewer 作为内置的打印按钮。但是,当尝试从 iPhone (iOS 12) 上的 Safari 打印时,它只会打印底部带有 url 的空白页。实际的 PDF 不打印。使用 iOS 上的 Chrome,它不会做任何我能看到的事情。我对 Angular 以及实际上对移动 Web 开发还很陌生,所以也许缺乏知识正在让我着迷。PDF 查看器位于 mat-tab 中,所以不确定这是否会导致一些问题?

我尝试过其他软件包,但它们似乎都基于来自 Mozilla 的相同 pdf.js 代码。这也是迄今为止我发现的唯一一个有印刷品的。我在考虑也许在 npm 包之外尝试 pdf.js,但到目前为止还没有找到让它在 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;
}

标签: iosangularpdfprintingmobile-safari

解决方案


推荐阅读