Question

我正在尝试使用样式化组件打印组件时控制尺寸/方向。我的问题是：如何使用@page CSS规则或另一种使用样式化组件来样式化打印组件的方法？

CSS @page文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/@page

我尝试过：

const PrintSchedulesContainer = styled.div`
  display: none;
  @media print and (min-width: 480px) {
    padding: none;
    margin: none;
  }
`;

并且：

const PrintSchedulesContainer = styled.div`
  display: none;
  @page {
    size: landscape;
  }
`;

Answer 1

您无法指定要打印的单个组件。
您需要隐藏其他元素，以使组件成为唯一打印出的元素。

@page仅适用于更改打印规则。
@media print允许您定义其他类样式，就像@media屏幕一样。

您可以在包装样式的组件内部使用 @media print ，使其全屏显示，并用白色背景固定。

示例：

const PrintableBodyWrapper = styled.div`
  @media print {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

function App() {
  return (
    <div className="App">
        <PrintableBodyWrapper>
          <div style={{ width: 100, height: 100, background: "grey" }}>
            I will be printed
          </div>
        </PrintableBodyWrapper>
    </div>
  );
}

要更改打印规则，您需要将@page添加到global style中并呈现全局样式组件。

import styled, { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  @page {
    size: landscape;
    margin: 5cm;
`;

const PrintableBodyWrapper = styled.div`
  @media print {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

function App() {
  return (
    <div className="App">
        <GlobalStyle />
        <PrintableBodyWrapper>
          <div style={{ width: 100, height: 100, background: "grey" }}>
            I will be printed
          </div>
        </PrintableBodyWrapper>
    </div>
  );
}

如何使用样式化的组件对组件的打印进行样式设置？

1 个答案: