Question

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

我想证明PDF可以适应容器的高度，而不管其宽度如何。因此，PDF必须像我们可以通过从Mozilla的PDF（链接here）的缩放选项中选择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，将height分配给所有容器以及更多容器。

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

Answer 1

经过大量的努力，我找到了一种使PDF扩展到容器高度的方法。我不知道这是否是一种好方法，但是在我的情况下它效果很好。

在主css或style.scss中添加以下style.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)事件函数来编辑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之后显示。

肯定有一些好的方法可以做到这一点。但是，这是我经过几个月的搜索发现的唯一一个。

Answer 2

使用[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"组合使用。

Make PDF如何适合高度-ng2-pdf-viewer

2 个答案: