我最近开始在一个团队中工作，该团队在我们的 Angular 应用程序中显示大量 pdf 文档。我们遇到一个问题，其中一个 pdf 文档在打印时出现的打印预览弹出窗口中显示额外的空白页。
在我们显示此 pdf 文档的所有其他窗口中，没有多余的页面。它只在弹出的打印预览窗口中显示额外的页面。
我关注了几个不同的文档链接，这些链接讨论了打印预览中的额外空白页https://support.syncfusion.com/kb/article/7566/how-to-avoid-the-extra-blank-pages-在-net-webforms 中打印和打印预览-
这些文章分别是为了防止在使用.net web forms、.net core、javascript 和 wpf 时显示额外的页面。不幸的是，这些文档都无法帮助我。
我已经搜索了整个应用程序，试图找出在哪里或如何使该报告的宽度太大，从而导致显示额外的页面，但我找不到任何东西。
我什至关注了我发现的这篇 github 文章 https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/1431，它对如何查看 CSS 媒体类型的样式给出了非常详细的解释。不幸的是，我也无法看到任何特定于syncfusion pdf查看器的东西，这导致了模糊的样式问题。
这里有一些代码片段，可以帮助您了解我们正在做什么
<div class="row">
<div class="col-12">
<div class="card border-0 table-view p-4">
<div class="content-wrapper" *ngIf="isLoaded">
<!-- Toolbar buttons are disabled in acord-form-view-component.scss -->
<ejs-pdfviewer
#pdfviewer
id="acord-form-ejs-pdf-viewer"
[serviceUrl]="serviceUrl"
[documentPath]="documentUrl"
[isFormFieldsEditable]="true"
(zoomChange)="onZoomChange()"
style="height:640px;display:block"
></ejs-pdfviewer>
</div>
</div>
</div>
</div>
这是在我们尝试打印之前创建原始 pdf 查看器的地方。查看每个包含容器，应该有任何直接与查看器的高度或宽度混淆的东西。
要实际触发打印，使用一个简单的按钮
<button
mat-raised-button
color="primary"
class="mr-2"
type="button"
(click)="PrintFile()"
[disabled]="!printPermission"
>
<i class="fas fa-1x align-middle mr-2 fa-print"></i>Print
</button>
打印文件然后将 acord-form-ejs-pdf-viewer 元素放入“查看器”中
PrintFile():void {
if (this.allowEdit) {
this.loading = true;
const viewer = (<any>document.getElementById('acord-form-ejs-pdf-viewer')).ej2_instances[0];
viewer.saveAsBlob().then((value) => {
const reader = new FileReader();
reader.readAsDataURL(value);
reader.onload = () => {
const dataTemp = reader.result.toString();
if (this.isAddNew == true) {
this.createAttachment(
utils.dataURLtoFile(dataTemp, this.fileName),
true,
false
);
this.isAddNew = false;
} else {
this.updateAttachment(
utils.dataURLtoFile(dataTemp, this.fileName),
true,
false,
viewer
);
}
};
})
} else {
this.printDocument();
}
}
这里没有调用 print 函数，但在我当前的情况下 this.isAddNew 是 FALSE，所以我们要点击这个代码块
this.updateAttachment(
utils.dataURLtoFile(dataTemp, this.fileName),
true,
false,
viewer
);
它将我们的查看器传递给 updateAttachment，然后它不会以任何方式更改查看器，但最终将查看器发送到我的 printDocument(viewer) 函数
private printDocument(vw?: any): void {
if (vw) {
vw.print.print();
} else {
const viewer = (<any>document.getElementById('acord-form-ejs-pdf-viewer')).ej2_instances[0];
viewer.print.print();
}
}
我们在这里可以看到我们的查看器和 vw.print.print();这会拉出打印预览。
SO vw 是当客户选择打印时我们向客户展示的查看器。
这意味着我可以尝试更新高度、宽度，并将边距/填充设置回 0 以确保其小于 20px，但我所做的一切都不起作用。相信我，我尝试过以多种不同的方式直接为该查看器调整样式。
关于如何调整此查看器以便我们的打印功能不会创建第二页有什么建议吗？
如果您在特定文档中遇到额外空白页问题，请分享出现问题的文档。这将有助于我们及时调查并解决问题。另外，请分享您的客户端和服务器端版本。