ReactJSを使用して印刷ページを作成する

印刷ページを作成してから、私がやっているやり方がそれほど強烈でないようになってきました。（下記コード参照）。私のウェブサイトの残りの部分はReactJSで書かれているので、何らかの形でReactJSとDOMの挿入があったでしょうか？（下の2番目の例を参照してください）CSS @mediaプリントを試しましたが、すべてのブラウザのフレーバで非常に複雑なウェブサイトでうまく動作しません。もっと最近では、私は印刷ページのためだけに完全に別のReactJSウェブサイトを作って、印刷ページに必要な情報のいくつかのためにクエリ文字列を渡してきました。何を作る混乱！ReactJSを使用して印刷ページを作成する

var html: string = '<!DOCTYPE html>'; 

    html += '<html lang="en">'; 

    html += '<head>'; 
    html += '<meta charset="utf-8">'; 
    html += '<title>Title</title>'; 
    html += '</head>'; 

    html += '<body style="background-color: white;">'; 
    html += '<div">'; 
    html += getContent(); 
    html += '</div>'; 
    html += '</body>'; 
    html += '</html>'; 

    var newWin = window.open(); 
    newWin.document.write(html); 
    newWin.document.close();

第二の例：

var sNew = document.createElement("script"); 
    sNew.async = true; 
    sNew.src = "Bundle.js?ver=" + Date.now(); 
    var s0 = document.getElementsByTagName('script')[0]; 
    s0.parentNode.insertBefore(sNew, s0);

出典

2017-06-06 Lambert

うんあり、チェックアウトreact-print。

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

class MyTemplate extends React.Component { 
    render() { 
    return (
      <PrintTemplate> 
      <div> 
        <h3>All markup for showing on print</h3> 
        <p>Write all of your "HTML" (really JSX) that you want to show 
        on print, in here</p> 
        <p>If you need to show different data, you could grab that data 
        via AJAX on componentWill/DidMount or pass it in as props</p> 
        <p>The CSS will hide the original content and show what is in your 
        Print Template.</p> 
      </div> 
      </PrintTemplate> 
     ) 
    } 
} 

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

出典

2017-06-06 20:50:39

印刷の@media印刷方法には大した恵みはありませんでした。複雑なウェブサイトの中には、常に印刷ページに表示される部分があるようですが、提案に感謝します。 – Lambert

ReactJSを使用して印刷ページを作成する

答えて

関連する問題