인쇄 스타일

Ignite UI for Angular 몇 가지 기본 인쇄 스타일을 제공하는데, 이를 통해 구성 요소가 웹 페이지에 나타나는 것과 종이에 나타나는 것이 최소한 동일하게 보이도록 보장합니다.

How to make use of the printing styles

구성 요소가 용지에 완전히 보이도록 하려면 인쇄할 문서와 크기가 같거나 작아야 합니다. 그렇지 않으면 잘릴 수 있습니다.

By default the printing styles are incorporated in the compiled CSS. If you are not planning to print, we suggest you turn them off in order to reduce the size of the outputted CSS.

You can do that in your theme SCSS file:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// Turn the print styles off by setting the $print-layout param to false.
@include core($print-layout: false)

// Add the theme and the palette.
@include theme($default-palette);

​v13.2 부터는 종이에 어떤 부분을 표시할지 모르기 때문에 기본적으로 어떤 구성 요소도 숨기지 않기로 결정했습니다.

In order to remove a piece or a whole component from the printed page, you can either add the class .igx-no-print to the element/component you don't want to print, or if you don't have access to the DOM you can directly target that element tag or class and set its display: none.

Let's say that you can't' accesses a button in the DOM to put .igx-no-print on it. You can still hide that button from printing styles using SCSS.

@media print {
    [igxButton] {
        display: none;
    }
}

여기서 @media print는 내부에 작성한 스타일이 인쇄하는 동안에만 적용되도록 하기 위해 사용됩니다.

If you want to print in black and white you can use .igx-bw-print class on any element and that element and everything inside it will turn black & white when printed.

To print the igx-grid we recommend using the export to excel feature or making a screenshot of the grid and printing it.