6

我ng2-pdf-viewer在我的 Angular 8 应用程序中使用。

无论宽度如何，我都想显示适合容器高度的 PDF。因此，PDF 必须占据所有高度，我们可以通过Page Fit从 Mozilla 的 PDF 中选择缩放选项来做到这一点（链接在这里）：

所需情况示例

这是我现在得到的： 在此处输入图像描述

我的代码ng2-pdf-viewer是：

            <pdf-viewer
            [src]='"./assets/images/userFiles/" + file.fileName'
            [original-size]="false"
            [render-text]='false'
            [show-all]="false"
            style="display: block; height: 100%;"
            (after-load-complete)='afterLoadComplete($event)'
            (page-rendered)='pageRendered($event)'
            (pageChange)='pageChange($event)'

            ></pdf-viewer>

几天来我已经尝试了无数的事情来让这个工作。fit-to-page，给予height所有容器等等。

告诉我，完成它的最佳方法是什么

4

3 回答 3

8

经过一番努力，我找到了一种让 PDF 拉伸到容器高度的方法。我不知道这是否是好方法，但它在我的场景中效果很好。

  1. css在您的主要style.scss或添加以下内容style.css：
.ng2-pdf-viewer-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
  1. ng2-pdf-viewer像这样将组件放入您的组件中：
// other imports
import { PdfViewerComponent } from 'ng2-pdf-viewer';


export class YourComponent{

  @ViewChild(PdfViewerComponent, {static: false})
  private pdfComponent: PdfViewerComponent;

// other code
}
  1. 然后使用(page-rendered)事件函数编辑currentScaleValue. pdfViewer请检查以下代码： 在 html 文件中：
<div style='position: relative; height: 100%;'>

            <pdf-viewer [src]='"./assets/images/userFiles/" + file.fileName'
            [show-all]="false"
            [autoresize]="true"
            [original-size]='true'
            [fit-to-page]='true'
            [render-text]='false'
            (page-rendered)="pageRendered()"
            ></pdf-viewer>
</div>

在您的组件文件中：

  // called after pdf page is rendered
  pageRendered() {
    this.pdfComponent.pdfViewer.currentScaleValue = 'page-fit';
  }

而已。请注意，当更新 pdf 或调整浏览器屏幕大小时，您会注意到闪烁或故障。这是因为，ng2-pdf-viewer根据它的设置更改高度，然后在呈现 pdf 页面时，我们将其更改为page-fit. 我在更新时将 pdf 隐藏一段时间，然后在将设置加载到page-fit.

当然，有一些很好的方法可以做到这一点。但是，这是我找了几个月才找到的唯一一个。

于 2019-10-13T12:20:10.137 回答
1

使用[fit-to-page]="true"选项使 PDF 适合页面。

<pdf-viewer
   [src]='"./assets/images/userFiles/" + file.fileName'
   [original-size]="false"
   [render-text]='false'
   [show-all]="false"
   style="display: block; height: 400px;"
   (after-load-complete)='afterLoadComplete($event)'
   (page-rendered)='pageRendered($event)'
   (pageChange)='pageChange($event)'
   [fit-to-page]="true">
</pdf-viewer>

它应该与[original-size]="true".

于 2019-06-14T16:17:11.327 回答
0

另一种方法不是解决我的问题的最佳方法，因为其他方法不与我合作。

1-您需要在完成 pdf 的渲染时收到通知

<pdf-viewer
.....
 (page-rendered)="pageIsRendered()>
</pdf-viewer>

2-您需要选择具有“ng2-pdf-viewer-container”类的元素 并更改样式。

3-呈现 pdf 时在所选元素上应用样式“显示：内容” 。

像那样：

pageIsRendered() {
    this.elementRef.nativeElement.getElementsByClassName('ng2-pdf-viewer-container')[0].style.display = 'contents';
}

没有其他解决方案对我有用，经过长时间的搜索，我以这种方式修复了它。

于 2022-02-21T14:16:03.537 回答