인쇄 스타일
Ignite UI for Angular 몇 가지 기본 인쇄 스타일을 제공하는데, 이를 통해 구성 요소가 웹 페이지에 나타나는 것과 종이에 나타나는 것이 최소한 동일하게 보이도록 보장합니다.
인쇄 스타일을 활용하는 방법
구성 요소가 용지에 완전히 보이도록 하려면 인쇄할 문서와 크기가 같거나 작아야 합니다. 그렇지 않으면 잘릴 수 있습니다.
default으로 printing 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);
scssv13.2 부터는 종이에 어떤 부분을 표시할지 모르기 때문에 기본적으로 어떤 구성 요소도 숨기지 않기로 결정했습니다.
인쇄된 페이지에서 일부 또는 전체 구성 요소를 제거하려면 인쇄하고 싶지 않은 요소/구성 요소에 .igx-no-print 클래스를 추가하거나 해당 페이지에 대한 액세스 권한이 없는 경우 추가할 수 있습니다. DOM에서는 해당 요소 태그나 클래스를 직접 대상으로 지정하고 표시를 설정할 수 있습니다: 없음.
.igx-no-print 넣기 위해 DOM의 버튼에 액세스할 수 없다고 가정해 보겠습니다. SCSS를 사용하여 인쇄 스타일에서 해당 버튼을 숨길 수 있습니다.
@media print {
[igxButton] {
display: none;
}
}
scss여기서 @media print는 내부에 작성한 스타일이 인쇄하는 동안에만 적용되도록 하기 위해 사용됩니다.
흑백으로 인쇄하려면 모든 요소에.igx-bw-print 클래스를 사용할 수 있으며 해당 요소와 그 안에 있는 모든 항목은 인쇄 시 흑백으로 변합니다.
igx-grid 인쇄하려면 export to excel 기능을 사용하거나 그리드의 스크린샷을 만들어 인쇄하는 것이 좋습니다.
GitHub