angular - 如何使 PDF 适合高度 - ng2-pdf-viewer

Question

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

我想显示适合容器高度的 PDF，无论宽度如何。因此，PDF 必须占据所有高度，就像我们可以通过从 Mozilla PDF 的缩放选项中选择 Page Fit 来实现(链接 here ):

这是我现在得到的:

我的 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>

几天来我尝试了无数的方法才能使其正常工作。 适合页面，为所有容器提供高度等等。

请告诉我，完成此任务的最佳方法是什么

Answer 1

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

1. 在主 style.scss 或 style.css 中添加以下 css:

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

将 ng2-pdf-viewer 组件添加到您的组件中，如下所示:

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


export class YourComponent{

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

// other code
}

然后使用(page-rendered)事件函数编辑pdfViewer的currentScaleValue。请检查下面的代码:在 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 后显示。

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