ngx-extended-pdf-viewer - В Pdf просмотрщике образуется промежуток между панелью инструментов и документом, когда я использую URL S3.

ngx-extended-pdf-viewer – В Pdf просмотрщике образуется промежуток между панелью инструментов и документом, когда я использую URL S3.

На чтение 4 мин Опубликовано 21.09.2024

Вопрос или проблема

Я использую ngx-extended-pdf-viewer и изначально передавал pdf-буфер, который правильно отображал pdf в просмотрщике с корректным позиционированием и размерами. Я решил вместо этого использовать мой публичный url s3 в качестве значения src в моем шаблоне, и когда я это делаю, мой просмотрщик pdf открывается с зазором между панелью инструментов и самим документом (см. изображение ниже). Я пробовал работать со всеми свойствами, которые предоставляет ngx-extended-pdf-viewer, но не смог избавиться от этого зазора. Кто-нибудь сталкивался с этой проблемой?


<div class="pdf-viewer-container" style="height: 100vh; overflow: hidden;">
  <ng-container *ngIf="pdf; else errorTemplate">
    <ngx-extended-pdf-viewer
      [src]="pdf"
      [customToolbar]="additionalButtons"
      [height]="'auto'"
      [textLayer]="true"
      [showHandToolButton]="true"
      [zoom]="'100%'"
      [page]="pageNumber"
    >
    </ngx-extended-pdf-viewer>
  </ng-container>
  <ng-template #errorTemplate>
    <p>Не удалось загрузить PDF. Пожалуйста, попробуйте позже.</p>
  </ng-template>
</div>

вставьте описание изображения здесь

Я пробовал устанавливать свойство [height] на различные значения, но это всего лишь высота контейнера, а не фактическое положение документа. Я также заметил, что есть вложенный тег с CSS-стилем “top”, установленным на 111px, и когда я избавляюсь от этого в инструментах инспектора, зазор исчезает, однако я не могу получить доступ к этой проблеме из моего кода.

Ответ или решение

Чтобы решить проблему с зазором между панелью инструментов и документом в ngx-extended-pdf-viewer, когда PDF загружается из URL-адреса S3, вы можете попробовать следующие подходы:

CSS стили: Прежде всего, можно решить проблему с помощью кастомных стилей CSS. Если вы заметили, что вложенный элемент имеет стиль top: 111px, вы можете переопределить это значение с помощью вашего собственного CSS. Добавьте стиль в ваш компонент или в глобальные стили приложения:
```
::ng-deep .ngx-extended-pdf-viewer {
   margin-top: 0 !important; /* Убираем верхний отступ */
}

::ng-deep .ngx-extended-pdf-viewer .ng2-pdf-viewer {
   top: 0 !important; /* Убираем смещение */
}
```
Использование ::ng-deep позволяет точно нацелиться на внутренние элементы компонента.
Проверка обновлений: Убедитесь, что вы используете последнюю версию ngx-extended-pdf-viewer. Разработчики часто исправляют проблемы с позиционированием и добавляют новые функции, поэтому важно обновлять библиотеку до последней версии. Проверьте репозиторий GitHub на наличие обновлений и изменений в документации.
Настройка высоты контейнера: Несмотря на то, что вы уже пробовали разные значения высоты, вы можете попробовать задать фиксированное значение для контейнера, в котором находится ваш PDF. Например:
```
<div class="pdf-viewer-container" style="height: calc(100vh - 150px); overflow: hidden;">
```
Это позволит вам предназначить высоту для PDF просмотрщика, чтобы убедиться, что он не перекрывается панелью инструментов.
Обновление PDF после загрузки: Попробуйте перезагрузить PDF файл после его загрузки. Иногда это может помочь пересчитать размеры. Вы можете использовать lifecycle hook для этого:
```
ngOnInit() {
   this.loadPdf();
}

loadPdf() {
   // Замените это на вашу логику загрузки PDF
   this.pdf = 'url_to_your_pdf';
}
```
Опции библиотеки: Изучите все доступные опции в ngx-extended-pdf-viewer и убедитесь, что вы правильно их используете. Например, добавление некоторых опций в конфигурацию может повлиять на отображение:
```
<ngx-extended-pdf-viewer 
   [src]="pdf" 
   [height]="'auto'" 
   [showHandToolButton]="true" 
   [useBrowserZoom]="true" 
   [textLayer]="true"
   [zoom]="'page-width'">
</ngx-extended-pdf-viewer>
```
Обратиться к сообществу: Если все остальные шаги не помогут, вы можете обратиться к сообществу пользователей ngx-extended-pdf-viewer на GitHub или в других форумах. Возможно, другие пользователи сталкивались с аналогичными проблемами и могут дать полезные советы.

После выполнения вышеуказанных шагов, ожидается, что gap между панелью инструментов и документом должен исчезнуть. Если проблема все еще сохраняется, возможно, стоит проверить, нет ли конфликтов с другими стилями или компонентами в вашем приложении.