인쇄 스타일
Ignite UI for Angular 몇 가지 기본 인쇄 스타일을 제공하는데, 이를 통해 구성 요소가 웹 페이지에 나타나는 것과 종이에 나타나는 것이 최소한 동일하게 보이도록 보장합니다.
How to make use of the printing styles
구성 요소가 용지에 완전히 보이도록 하려면 인쇄할 문서와 크기가 같거나 작아야 합니다. 그렇지 않으면 잘릴 수 있습니다.
이들은defaultprinting styles 통합되어 있습니다.compiled CSS 인쇄할 계획이 없다면, 출력되는 CSS 크기를 줄이기 위해 이 기능을 끄는 것을 권장합니다.
테마 파일에서SCSS 그렇게 할 수 있습니다:
@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 부터는 종이에 어떤 부분을 표시할지 모르기 때문에 기본적으로 어떤 구성 요소도 숨기지 않기로 결정했습니다.
인쇄된 페이지에서 조각이나 전체 컴포넌트를 제거하려면, 출력하고 싶지 않은 요소/컴포넌트에 .igx-no-print 클래스를 추가하거나, DOM에 접근할 수 없다면 해당 원소 태그나 클래스를 직접 타겟팅하여 표시를 설정할 수 있습니다: 전혀 없어.
예를 들어, DOM에서 버튼을 눌러 달 수.igx-no-print 없다고 가정해 봅시다. SCSS를 사용하면 인쇄 스타일에서 그 버튼을 숨길 수 있습니다.
@media print {
[igxButton] {
display: none;
}
}
여기서 @media print는 내부에 작성한 스타일이 인쇄하는 동안에만 적용되도록 하기 위해 사용됩니다.
흑백으로 인쇄하고 싶다면, 어떤 요소든 클래스를 사용할.igx-bw-print 수 있고, 그 요소와 그 안에 있는 모든 요소가 인쇄되면 흑백으로 변합니다.
출력igx-grid 하려면 해당 기능을 사용export to excel 하거나 격자 스크린샷을 찍어 출력하는 것을 권장합니다.
GitHub