인쇄 스타일
Ignite UI for Angular 몇 가지 기본 인쇄 스타일을 제공하는데, 이를 통해 구성 요소가 웹 페이지에 나타나는 것과 종이에 나타나는 것이 최소한 동일하게 보이도록 보장합니다.
How to make use of the printing styles
구성 요소가 용지에 완전히 보이도록 하려면 인쇄할 문서와 크기가 같거나 작아야 합니다. 그렇지 않으면 잘릴 수 있습니다.
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