时间戳

首页 > 解决方案 > make PDF 如何适应高度 - ng2-pdf-viewer

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

问题描述

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

无论宽度如何，我都想显示适合容器高度的 PDF。因此，PDF 必须占据所有高度，我们可以通过Page Fit从 Mozilla 的 PDF 中选择缩放选项来做到这一点（链接在这里）：

所需情况示例

这是我现在得到的： 在此处输入图像描述

我的代码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所有容器等等。

告诉我，完成它的最佳方法是什么

标签： angularpdfangular8

解决方案

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

  1. css在您的主要style.scss或添加以下内容style.css：
.ng2-pdf-viewer-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
  1. ng2-pdf-viewer像这样将组件放入您的组件中：
// other imports
import { PdfViewerComponent } from 'ng2-pdf-viewer';


export class YourComponent{

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

// other code
}
  1. 然后使用(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.

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

推荐阅读