make PDF 如何适应高度 - ng2-pdf-viewer

Question

我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所有容器等等。

让我知道完成它的最佳方法是什么

Answer 1

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

1. css在您的主要style.scss或添加以下内容style.css：

.ng2-pdf-viewer-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

2. 获取ng2-pdf-viewer组件到组件是这样的：

// other imports
import { PdfViewerComponent } from 'ng2-pdf-viewer';


export class YourComponent{

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

// other code
}

3. 然后使用(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.

当然，有一些很好的方法可以做到这一点。但是，这是我经过几个月的搜索后找到的唯一一个。