Как я могу напечатать один компонент в Angular? - PullRequest
Новая
       19

Как я могу напечатать один компонент в Angular?

0 голосов
/ 28 сентября 2018

В одном угловом компоненте мне нужна кнопка печати, которая, когда пользователь нажимает, напечатает один div из шаблона моего компонента.

Я знаю , этот ответ работает,Я попробовал это.Но мне не нравится, как мне нужно повторно применять все стили или переписывать все стили в тегах <style> head.

Мне действительно нравится этот ответ, но я не могу его получитьРабота.Я думаю, что это может иметь какое-то отношение к тому, как классы переименовываются после того, как приложение было обслужено / построено.

Вот как я реализовал ответ выше, но не могу заставить его работать.

component.ts 

onPrint() {
  window.print();
}

component.html 

<div class="print">
  <button (click)="onPrint()">Print</button>
  all the stuffs I want to print
</div>

component.scss 

@media print {
  :not(.print) {
    display: none !important;
  }
}

Как получить приведенный выше ответ для работы, получив как можно меньше кода и сохранив стили, примененные к интерфейсу?

Я понимаю, насколько похоживопрос к этому одному, но этот вопрос задавался почти два года назад и в отношении угловых 2. Не совсем уверен, насколько он отличается от угловых 6.

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Единственный способ, который работал для меня, - это скрыть все элементы, кроме того, который я печатаю.Копирование HTML-кода в новое окно (и аналогичные решения) не помогло мне из-за проблем со стилем.

Для работы следующего кода требуется jQuery. 

print(triggerElement): void
{
    const toShow = this.hideParentSiblings($('#print-section'));
    $(triggerElement).hide();

    window.print();

    for (const e of toShow)
    {
        e.show();
    }

    $(triggerElement).show();
}

hideParentSiblings(element): any[]
{
    let parent;
    const toShow = [];

    while ((parent = element.parent()).length)
    {
        const visible = parent.siblings().find(':visible');
        toShow.push(visible);
        visible.hide();
        element = parent;
    }

    return toShow;
}
0 голосов
/ 28 сентября 2018

Стили в компоненте CSS будут применяться только к этому отдельному компоненту, поэтому вкладки матов родительского компонента по-прежнему отображаются.

В качестве альтернативы вы можете добавить стили в style.css / styles.scss.Проблема в том, что родительские элементы DOM (такие как body) также будут установлены на display: none, поэтому ничего не будет видно.

Вместо этого вы можете попробовать использоватьvisibility в styles.css примерно так: 

@media print {
  :not(.printMe) {
    visibility: hidden;
  }
}

@media print {
  .printMe {
    visibility: visible
  }
}

В зависимости от вашего случая это может помочь, хотя элементы hidden по-прежнему будут занимать место на странице.

Вот форк StackBlitz для демонстрации

...