Chrome에서 Bootstrap 화면을 인쇄하면 뭔가 작은 ...

11757 단어 CSSBootstrapChrome
어라? Bootstrap을 사용하여 화면을 인쇄했는데 어떻습니까? (라고 할까 인쇄할 수 있는 양이 많다?)

라는 것을 깨달았습니다.

검증을 위해, 10mm각의 박스를 그린 곳입니다.

화면에 문제 없음



음, A4 상정으로, 가로 210mm X 세로 297mm이므로, 21개의 박스가 그려지는 것이 맞네요.



인쇄에서는?



미리 봤는데.
어라? 이상하네요, 25개 줄지어 있습니다. 그래서 1칸이 10mm가 아니라 8.4mm 정도로 줄어들군요.



CSS를 조사해 보았습니다.



인쇄시 CSS를 조사해 보았습니다. 아무래도, min-width가 지정되어 그것이 수상한 것 같습니다.
@media print
body {
    min-width: 992px!important;
}

이것은 어디에서 오는가? Bootstrap의 소스를 살펴 보겠습니다.

_print.scss에서 $print-body-min-width라는 것을 끌어오고 있네요.

bootstrap/scss/_print.scss
    // Specify a size and min-width to make printing closer across browsers.
    // We don't set margin here because it breaks `size` in Chrome. We also
    // don't use `!important` on `size` as it breaks in Chrome.
    @page {
      size: $print-page-size;
    }
    body {
      min-width: $print-body-min-width !important;
    }
    .container {
      min-width: $print-body-min-width !important;
    }

$print-body-min-width는 _variables.scss에 정의되었습니다.

bootstrap/scss/_variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$print-page-size:                   a3 !default;
$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

인쇄는 A4가 아니고 A3가 디포인지 ...

대책



그래서 min-width를 조정했습니다. 자신의 HTML CSS로 덮어 씁니다.
@media print {
  body {
    /* for chrome */
    width: 210mm;
    /* for chrome */
    min-width: auto !important;
  }
}

min-width를 auto로 하고 되돌릴 때 제대로 크기로 인쇄할 수 있습니다.



요약



Bootstrap에서는 각종 브라우저에서 같은 결과가 되도록 조정해 줍니다.
평상시 인쇄할 때는 특별히 문제 없습니다만, 장표 인쇄나 라벨 인쇄와 같이 제대로 사이즈로 인쇄하고 싶을 때에는 min-width의 지정을 신경쓰는 편이 좋을 것 같습니다.

이번은 body 태그였지만, class="container"등도 같은 지정이 있으므로 인쇄시에 정보의 덧쓰기가 필요합니다.

검증용 HTML



일단... 검증에 사용한 HTML입니다.
<!doctype html>
<html lang="ja">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>print sample</title>
    <style>
        body {
            /* for chrome */
            width: 210mm;
            margin: 0;
            padding: 0;
        }

        .cell {
            width: 10mm;
            height: 10mm;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: 1px solid #333333;
            float: left;
            text-align: center;
        }

        @page {
        size : A4;
        }
        @media print {
            body {
                /* for chrome */
                width: 210mm;
                /* for chrome */
                min-width: auto !important;
            }
        }
    </style>
    <script>
        window.addEventListener('load', init);

        function init() {
            const elements = document.getElementById('elements');
            for (let y = 0; y < 29; y++) {
                for (let x = 0; x < 21; x++) {
                    const ele = document.createElement('div');
                    ele.className = 'cell'
                    ele.innerText = x;
                    elements.appendChild(ele);
                }
            }
        }
    </script>
</head>

<body>
    <div id="elements" />
</body>

</html>
Yoga Server 2에 대한 GraphQL Armor 지원으로 향상된 보안
react.dom.development.js:29345 포착되지 않은 오류: createRoot(...): 대상 컨테이너가 DOM 요소가 아닙니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage