在ReactToPrint中调整页面大小

npm install react-to-print

import React from 'react';
import ReactToPrint from 'react-to-print';

// 导入需要打印的组件
import PrintableComponent from './PrintableComponent';

class PrintButton extends React.Component {
  render() {
    return (
      <div>
        {/* 创建一个按钮来触发打印操作 */}
        <button onClick={this.handlePrint}>打印</button>

        {/* ReactToPrint组件用于包装需要打印的组件 */}
        <ReactToPrint
          trigger={() => <a href="#">隐藏的打印按钮</a>}
          content={() => this.componentRef}
        />
        
        {/* 要打印的组件 */}
        <PrintableComponent ref={(el) => (this.componentRef = el)} />
      </div>
    );
  }

  handlePrint = () => {
    // 调用ReactToPrint组件的print方法来触发打印操作
    this.componentRef.handlePrint();
  };
}

export default PrintButton;

import React from 'react';

class PrintableComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 组件的内容 */}
        <h1>打印内容</h1>
        <p>这是要打印的内容。</p>
      </div>
    );
  }

  handlePrint = () => {
    // 打印操作
  };
}

export default PrintableComponent;

@media print {
  /* 设置打印页面大小为A4纸张大小 */
  @page {
    size: A4;
  }

  /* 隐藏不需要打印的元素 */
  body {
    visibility: hidden;
  }

  /* 显示需要打印的元素 */
  .printable-content {
    visibility: visible;
  }
}