我有一个Angular 7应用程序,该应用程序使用ngx-extended-pdf-viewer呈现从web.api作为字节数组获取的PDF。我没有渲染PDF甚至从任何桌面应用程序打印它的问题。 ngx-extended-pdf-viewer作为内置的打印按钮。但是,当尝试从iPhone(iOS 12)上的Safari打印时,它仅打印空白页面,其网址在底部。实际的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>
TypeScript:
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;
}