重新渲染用於打印的Reactjs組件

我有一個畫廊組件，它使用當前窗口大小來確定畫廊項目的大小。我還鉤住了窗口大小調整事件，以便在調整窗口大小時正確調整圖庫項目的大小。重新渲染用於打印的Reactjs組件

在Chrome中，如果用戶打印圖庫，則不會調整項目的大小以適合打印頁面。相反，他們只是使用爲窗口大小計算的最後一個大小。即使在打印選項中從縱向切換到橫向時也是如此。

當打開打印對話框並且頁面佈局從縱向切換到橫向時，是否有任何方法可以對重新渲染組件做出反應？我認爲打印對話框會重新渲染具有新尺寸的頁面，但似乎並非如此。

來源

2016-01-28 Bill

如果佈局對窗口大小調整起作用，爲什麼不使用打印CSS來調整窗口大小並重新排列布局？ –

有沒有辦法告訴紙張大小和方向？否則，我將不得不硬編碼一個單一的值，這並不總是會產生正確的結果。 – Bill

打印頁面時，瀏覽器拍攝當前DOM的快照並應用print媒體樣式。你的問題是DOM上的元素取決於屏幕的尺寸。

當用戶調整屏幕大小時，窗口大小調整事件將有助於重新排列組件，但用戶打印時不會觸發它們。然而，當用戶打印頁面時，您可以通過這些方法來聆聽事件。

window.onbeforeprint將在用戶打印頁面時觸發。在事件中，您可以調整屏幕大小以使窗口大小調整事件觸發，或者以其他方式重新渲染組件。它在chrome中不受支持，雖然看看this stackoverflow post，它解釋瞭如何使用window.matchMedia('print')來代替。

它總是最好的依賴於CSS媒體查詢，而不是在屏幕尺寸和調整事件大小，但有時並不總是可能的。

來源

2016-02-01 18:35:00

感謝Marc，我發現它很有幫助。我已經在componentWillMount中添加了一個監聽器給window.matchMedia（'print'），它根據查詢是否匹配將狀態上的'isPrinting'屬性更改爲true或false，然後調用forceUpdate（）。但是，只有在打印對話框關閉後纔會發生由forceUpdate觸發的重新渲染，此時媒體會再次更改。 –

不客氣@ThomasHopkins，很高興我能提供幫助。順便說一句，這是一個很好的解決方案，也許你可以將代碼發佈給其他人看看它是如何工作的。 –

Thanks @MarcGreenstock，但不幸的是這不是一個解決方案。只有在打印對話框關閉後纔會執行在forceUpdate上發生的重新渲染，屆時已經太遲了！ –

您需要在組件中使用matchMedia API。但是自己做，你會重新發明一大堆車輪。使用現有的庫來處理這件事會更容易。請查看https://www.npmjs.com/package/react-responsive。它具有matchMedia以上的基於React的包裝組件，因此您應該能夠在您的項目中快速構建原型。也有polyfills也可用。我能想到的另一個優點是，您可以在界面中有一個打印預覽選項，您可以讓用戶預覽圖庫在打印模式下的外觀。爲此，您可以使用該庫的服務器渲染功能來模擬打印模式。 PS：我不以任何方式隸屬於此項目。

來源

2016-02-02 12:22:11 hazardous

使用媒體查詢目標人像和風景打印

@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 */ 
}

來源

2016-02-02 17:14:40 WitVault

另外WitVault的解決方案，我創建了一個簡單的組件做出反應，使得處理複雜print.css容易得多。而不是增加班級，標識等，都在你的標記，並創建一個複雜的print.css文件，你可以用我的反應印刷庫如下：

https://github.com/captray/react-print

這個ID添加到根（或在某處你的DOM樹高達）的當前內容（但在身體標籤內）

<div id="react-no-print">

添加一個div的「打印安裝」的ID，或任何安裝ID你想使用。

<div id="print-mount"></div>

創建所需的結構爲你的打印版本（可以包括與自己的風格子組件，使事情變得更容易。

var PrintTemplate = require('react-print'); 
var ReactDOM = require('react-dom'); 
var React = require('react'); 

var MyTemplate = React.createClass({ 
    render() { 
     return (
      <PrintTemplate> 
       Your custom HTML or React Components go here, and will replace the existing HTML inside of the "react-no-print" ID, and instead it will render what's inside of your custom template. 
      </PrintTemplate> 
     ); 
    } 
}); 

ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount'));

基本上，這使得您的打印版本，但它隱藏，直到它需要打印，如果你需要這個滑動畫廊，你可能想要鉤住你的滑塊的變化事件並重新渲染（卸載舊的，裝上新的）打印模板。

Hope這有助於！

來源

2016-08-14 01:07:04 captray

重新渲染用於打印的Reactjs組件

回答

相關問題