Как правильно установить ориентацию печати в приложении Angular? - PullRequest
Новая
       25

Как правильно установить ориентацию печати в приложении Angular?

0 голосов
/ 10 июня 2019

Мне нужно создать службу печати, которая будет вызываться из разных компонентов в моем приложении. Сервисный метод принимает два параметра: компонент, который необходимо скомпилировать и распечатать, и ориентацию печати (книжная или альбомная).

Все отлично работает, кроме ориентации. Либо он не установлен, либо придерживается второй примененной ориентации. Под второстепенной ориентацией я имею в виду, что у меня есть две кнопки для тестирования. Каждая кнопка вызывает разные компоненты и устанавливает разную ориентацию. Если я нажимаю кнопки в следующем порядке: книжная ориентация, а затем альбомная ориентация, независимо от того, что я нажимаю после этого, страница печатается в альбомной ориентации, и наоборот.

Пока что я пробовал следующее:

  • определил два условно сгенерированных элемента div (с директивой ngIf). Каждый div содержит <style></style> элементов с соответствующей ориентацией страницы. Элементы style не отображаются, поэтому ориентация не изменяется

  • ориентация страницы определяется в метаданных style / stuleUrls компонента. Это создает проблему со второй примененной ориентацией, как описано выше

  • добавить стиль к динамически создаваемым компонентам с помощью ComponentFactoryResolver. Стилизация к странице не применяется

Компонент динамически генерируется с использованием ComponentFactoryResolver. Для простоты я не буду публиковать этот код. Я опубликую это, если это необходимо.

Этот html добавлен в app.component.html: 

<div class="print-section">
    <div *ngIf="printOrientation === orientationEnum.Landscape">
        <style>
            @media print {
                @page {
                    orientation: landscape !important;
                }
            }
        </style>
    </div>
    <div *ngIf="printOrientation === orientationEnum.Portrait">
        <style>
            @media print {
                @page {
                    orientation: portrait !important;
                }
            }
        </style>
    </div>
</div>

Тот же код добавляется в метаданные компонента style / styleUrls.

Я также пытался динамически добавлять классы к сгенерированным компонентам после создания компонента: 

let element: HTMLElement = <HTMLElement>componentRef.location.nativeElement;
this.printTemp.layout === PrintLayoutEnum.Landscape ? element.classList.add('landscape-print') : element.classList.add('portrait-print');

Это никак не влияет на ориентацию.

Ожидаемый результат - изменить ориентацию соответствующим образом. Либо путем установки style в app.component.html, либо путем динамического применения при визуализации компонента с ComponentFactoryResolver. Я предпочитаю второй вариант, но любой из них должен быть в порядке.

1 Ответ

0 голосов
/ 10 июня 2019

Я получил туннельное зрение и попытался усложнить решение.Я создал элемент style с идентификатором.Во время создания компонента с помощью ComponentFactoryResolver я просто добавил желаемый стиль: 

let styleElement = document.getElementById('print-style');
styleElement.append('@media print { @page { size: A4 landscape; } }')
...