在iOS和Mobile Safari或Chrome上使用ngx扩展pdf查看器打印

我有一个Angular 7应用程序，它使用ngx extended pdf viewer呈现我从web.api获取的作为字节数组的pdf。我没有任何问题呈现PDF，甚至从任何桌面应用程序打印它。ngx扩展pdf查看器作为内置的打印按钮。然而，在iPhone（iOS 12）上尝试从Safari打印时，它只打印一个底部带有url的空白页面。实际的PDF不会打印。在iOS上使用Chrome，我看不到它的任何功能。我对Angular和移动web开发都很陌生，所以可能是因为缺乏知识PDF查看器位于mat选项卡中，因此不确定这是否会导致一些问题？？？

我尝试过其他软件包，但它们似乎都基于来自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);

}

<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;
}

[HttpPost（“GetPdfBytes/{PdfId}”）]
public ActionResult GetPdfBytesId（[FromBody]int id）
{
string exactPath=string.Empty；
如果（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”）；
}
其他的
{
exactPath=Path.GetFullPath（“Emergency Issue.pdf”）；
}
byte[]bytes=System.IO.File.ReadAllBytes（exactPath）；
返回Ok（字节）；
}

HTML:

[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);

}

<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;
}

类型脚本：

[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);

}

<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;
}

getPDFBytesId（id:string）{
此.getPDFFromServicePdfBytesId（编号（id））.subscribe(
（数据：任何）=>{
this.pdfSrc3=this.convertDataURIToBinary（数据）；
},
错误=>{
console.log（错误）；
}
);
}
//点击web.api
getPDFFromServicePdfBytesId（id:number）：可观察{
const body=id；
返回此.http.post（'http://localhost:5000/api/values/GetPdfBytes/“+id，正文）；
}
//将获取的内容转换回查看器使用的Uint8Array
convertDataURIToBinary（dataURI:string）{
const raw=window.atob（dataURI）；
const rawLength=原始长度；
常量数组=新的Uint8Array（新的ArrayBuffer（rawLength））；
for（设i=0；i

这里是ngx扩展pdf查看器的作者。我成功地复制了你的错误。Mozilla的默认演示也会出现这种情况。这真的很奇怪，因为pdf.js只是隐藏了除包含pdf渲染的图像之外的所有内容。因此，打印只是要求浏览器打印图像的问题。另请参见。我已经在ngx extended pdf viewer的bugtracker上打开了一张罚单。谢谢你的报道！