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

【问题标题】：How the make PDF fit the height - ng2-pdf-viewermake PDF 如何适应高度 - ng2-pdf-viewer
【发布时间】：2022-02-21 22:16:03
【问题描述】：

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

我已经尝试了无数天来让这个工作。 fit-to-page，将height 提供给所有容器等等。

告诉我，最好的方法是什么

【问题讨论】：

标签： angular pdf angular8

【解决方案1】：

经过大量的努力，我找到了一种让 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 后显示。

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

【讨论】：

现在缩放属性不起作用，有什么解决方案吗？
是的，你可以在Github上查看解决方案here

【解决方案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" 的组合一起使用。

【讨论】：

它不起作用。我用[original-size]="true" 和[fit-to-page]="true"

【解决方案3】：

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

1- 完成 pdf 渲染后，您需要得到通知

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

2- 你需要选择类'ng2-pdf-viewer-container'的元素 并改变风格。

3- 在呈现 pdf 时将样式 'display:contents' 应用于所选元素。

这样：

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

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

【讨论】：