反应如何为不同的组件打印横向/纵向

Question

我们的 React 应用程序有大约 10 条不同的路线，我们希望它们都可以打印。 我们使用 css 打印媒体查询来清理 styles 以进行打印，并且前端有一个按钮，单击时调用window.print() 。

在这 10 条路线中，有 7 条页面看起来更适合landscape ，而另外 3 条页面更适合portrait 。 目前，@page 仅在应用的顶级@page文件中设置App.scss 。

应用程序.scss

@page {
  size: portrait;
}

@media print and (orientation: portrait) {
  .table-cols {
      max-width: 50%;
  }

  .my-selects { display: none; }
  .my-print-button { display: none; }
  .my-footer { display: none; }
  ...
}

@page { size: portrait }如何（如果有的话）切换到横向某些路线，具体取决于路线？ 也许可以制作landscape class 和portrait class ，每个都设置自己的@page值，然后将类用于路由返回的元素？

Answer 1

function setPageSize(cssPageSize) {
    const style = document.createElement('style');
    style.innerHTML = `@page {size: ${cssPageSize}}`;
    style.id = 'page-orientation';
    document.head.appendChild(style);
}

function PrintIcon({ teamId, orientation = 'portrait' }) {
    // Set orientation of page being printed
    useEffect(() => {
        setPageSize(orientation);
        return () => {
            const child = document.getElementById('page-orientation');
            child.parentNode.removeChild(child);
        };
    }, [orientation]);

    return (
        <div className='print-button' onClick={() => window.print()}>
            Click to Print
        </div>
    );
}

export default PrintIcon;

useEffect调用setPageSize()函数，该函数手动将@page添加到头部，其清理函数将删除@page ...

Answer 2

<div className="printLayoutContainer">
     <style type="text/css" media="print">
         {" @page { size: portrait; } "}
       </style>
</div>

您可以使用内部 CSS 打印横向或纵向。