0

视频了解问题

我正在使用 Angular 5 和 ng2-pdf-viewer。在以下模式中，当我来自另一个页面时，它会正确加载。但之后，它会产生像视频这样的奇怪问题。当浏览器或窗口调整大小时，就会出现完美的解决方案。

请向我建议可能的解决方案。

.pdf-modal-body {
  /* overflow-x: scroll;*/
  overflow-y: scroll;
  height: 400px;
  scroll-behavior: smooth;
}

.modal {
  /* max-width: 1200px; */
  align-self: center;
}

.modal-dialog {
  max-width: 1100px;
}

.modal-body {
  max-width: 1100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="d-block mb-2 mb-lg-0 text-md-left text-md-right">
  <button class="btn btn-sm btn-rounded btn-outline-success" id="howToUnlockDialogTrigger" data-toggle="modal" data-target="#howToUnlockModal">
                        <i class="ti ti-course-how-to"></i> How to unlock this E-Book
                    </button>
</div>

<div class="modal" id="howToUnlockModal" tabindex="-1" role="dialog" aria-labelledby="Subscribe" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="shadow modal-content border-0">
      <button type="button" data-dismiss="modal" aria-label="Close" class="btn btn-danger border-0 modal-close-button">
                <span aria-hidden="true">×</span>
            </button>
      <div class="modal-header bg-green">
        <div class="container px-0">
          <div class="row">
            <div class="col-12 text-center">
              <h6 class="text-white">How to unlock this E-Book</h6>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-body">
        <div class="card-body card-body-modal">
          <div class="p-3 pdf-modal-body" id="pdf-modal-body">
            <pdf-viewer [src]="'../assets/how_to_pay.pdf'" [render-text]="true" [autoresize]="true" [fit-to-page]="fitToPage" [original-size]="false" style="display: block;" [show-all]="true">
            </pdf-viewer>
          </div>
        </div>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button class="btn gradient-btn btn-rounded pr-4 pl-4" data-dismiss="modal" data-target="#howToUnlockModal">Ok</button>
      </div>
    </div>
  </div>
</div>

4

1 回答 1

0

我正在使用 angular 12 和 ng2-pdf-viewer。在以下模式中，当我来自另一个页面时，它会正确加载。但之后，它会产生像视频这样的奇怪问题。当浏览器或窗口调整大小时，就会出现完美的解决方案。

工作示例

http://5.9.10.113/60615329/bootstrap-modal-with-pdf-viewer-in-angular-4-failing-in-few-case

于 2021-06-08T07:35:15.317 回答