Question

我有一个图库组件，它使用当前窗口大小来确定制作图库项目的大小。我还挂了窗口大小调整事件，以便在调整窗口大小时正确调整图库项目的大小。

在Chrome中，如果用户随后打印了图库，则不会调整项目的大小以适合打印的页面。相反，他们只是使用为窗口大小计算的最后一个大小。即使在打印选项中从纵向切换到横向也是如此。

打开打印对话框以及页面布局从纵向切换到横向时，有没有办法强制对重新渲染组件做出反应？我认为打印对话框会重新呈现具有新尺寸的页面，但似乎并非如此。

Answer 1

当您打印页面时，浏览器会拍摄当前DOM的快照并应用print媒体样式。您的问题是DOM上的元素取决于屏幕的尺寸。

窗口调整大小事件将有助于在用户调整屏幕大小时重新排列组件，但在用户打印时不会触发它们。但是，有些方法可以在用户打印页面时收听事件。

用户打印页面时会触发

window.onbeforeprint。在事件上，您可以调整屏幕大小以使窗口调整大小事件触发器或以其他方式重新呈现组件。虽然请查看this stackoverflow post，但Chrome不支持它，它解释了如何使用window.matchMedia('print')代替。

最好依赖于css媒体查询，而不是屏幕尺寸和调整事件大小，但有时这并不总是可行。

Answer 2

使用媒体查询来定位纵向和横向打印

@media print and (orientation: landscape) {
    /* landscape styles */
    /* write specific styles for landscape e.g */
    h1 {
         color: #000;
         background: none;
      }

      nav, aside {
         display: none;
      }

   }

@media print and (orientation: portrait) {
    /* portrait styles */
}

Answer 3

您需要在组件中使用matchMedia API。但是自己动手，你将重新发明一大堆车轮。使用现有的库来处理这个问题会更容易。请查看https://www.npmjs.com/package/react-responsive。它在matchMedia上有基于React的包装器组件，因此您应该能够在项目中快速对其进行原型设计。还有填充剂。我能想到的另一个优点是，您可以在界面中使用打印预览选项，您可以让用户预览图库在打印模式下的外观。为此，您可以使用此库的服务器呈现功能来模拟打印模式。

PS：我不以任何方式参与这个项目。

重新渲染Reactjs组件以进行打印

3 个答案: