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

Question

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

我想显示适合容器高度的 PDF，而不考虑宽度。因此，PDF 必须采用我们可以通过从 Mozilla PDF 的缩放选项中选择 Page Fit 来实现的所有高度 (link 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>

几天来我尝试了无数种方法来让它工作。 fit-to-page，给予所有容器 height 等等。

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

Answer 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" 的组合一起工作。

Answer 2

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

在您的主 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.

后显示

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

Answer 3

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

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

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

2- 您需要 select 具有 class 'ng2-pdf-viewer-container' 的元素并改变风格。

3- 呈现 pdf 时在 selected 元素上应用样式 'display:contents'。

像那样：

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

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

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

How the make PDF fit the height - ng2-pdf-viewer

angular

pdf

angular8