Angular 如何使PDF适合高度-ng2 PDF查看器

我正在Angular 8应用程序中使用

ng2 pdf viewer

我想显示PDF适合容器的高度，而不考虑宽度。因此，PDF必须采用所有高度，我们可以通过从Mozilla的PDF（链接）中的缩放选项中选择

Page Fit

：

以下是我现在得到的：

我的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]=“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”

相结合。经过大量的努力，我找到了一种方法，可以将PDF拉伸到容器的高度。我不知道这是否是一个好方法，但在我的场景中，它非常有效

在主

style.scss

或

style.css

中添加以下

css

：

将

ng2 pdf viewer

组件按如下方式放入您的组件中：

然后使用

（页面呈现）

事件函数编辑

pdfViewer

的

currentScaleValue

。请检查以下代码： 在html文件中：

就这样。请注意，当更新pdf或调整浏览器屏幕大小时，您会注意到闪烁或故障。这是因为，

ng2 pdf viewer

根据其设置更改高度，然后在呈现pdf页面时，我们将其更改为

页面适合度

。我在pdf更新时将其隐藏一段时间，然后在将设置加载到

页面后显示

当然，有一些很好的方法可以做到这一点。但是，经过几个月的搜索，我发现这是唯一的一个。
它不起作用。我使用了
[原始尺寸]=“true”
和
[适合页面]=“true”
.ng2-pdf-viewer-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


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


export class YourComponent{

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

// other code
}


<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';
  }