2017-12-26 13 views
0
import React, { Component } from "react"; 

import { Button } from "semantic-ui-react"; 

class JobReleaseForm extends Component { 

render() { 
return (

    <div id="no-print"> 

    <Button onClick={() => window.print()}>PRINT</Button> 

    <p>Click above button opens print preview with these words on page</p> 

    </div> 
); 
} 
} 
    export default JobReleaseForm; 

こんにちは、 このコンポーネントの内容だけを印刷する方法を理解しています。 これが見つかりました。Reactjs特定のコンポーネントをCSSで印刷

@media print{ 
*{display:none;} 
#no-print{display:block;} 
} 

ただし、リアクションをどこに配置するかはわかりません。 特に@media部分。 助けていただければ幸いです ありがとうございます

答えて

0

私は、このソリューション

@media print { 
body * { 
visibility: hidden; 
} 
#section-to-print, #section-to-print * { 
visibility: visible; 
} 
#section-to-print { 
position: absolute; 
left: 0; 
top: 0; 
} 
} 

に来て、それが今

のためにうまく働いている待っていましたが、あなたのすべての

をありがとう
0

あなたのCSSを調整する必要があります。あなたのCSSからあなたが印刷したいものか印刷していないのかは不明ですが、*の範囲外は、すべての要素を対象としているので問題を引き起こす可能性があります。これを代わりに試してみてください:

さらに、id="no=print"を非表示にしたいものすべてに追加してください。

0

あなたのメディアプリントセレクタを定義するにあたり、あなたはよりよい方法を考えるべきです。ここでは、#no-printの親を含むすべての要素を選択するワイルドカードセレクタを使用しています。したがって、印刷が表示されないように設定されている場合でも、親がnoneに設定されているため、表示されません。あなたの例の回避策は、以下のようにcssを更新することです。重要なキーワードを使用しましたが、必要な場合を除いて使用するのが難しくありません。私は良い方法があると確信しています。しかし、私はあなたの問題の根本的な原因を知って、代わりに、あなたが持っているロジック全体を変更するように指示する方が良いことを発見しました。 thisもチェックしてください。

@media print{ 
:not(#no-print) > *{ 
    display:none; 
} 
body #no-print{display:block !important;} 
body #root{display:block !important;} 
body {display:block !important;} 
}