Question

制作打印页面必须采用不那么强力的方式，就像我一直在做的那样。（见下面的代码）。也许以某种方式使用ReactJS和DOM插入，因为我的网站的其余部分是用ReactJS编写的？（参见下面的第二个例子）我尝试使用CSS @media打印，但它在所有浏览器风格的非常复杂的网站上都不能很好地工作。最近，我一直在为打印页面创建一个完全独立的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);

Answer 1

是的，结帐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'));

使用ReactJS创建打印页面

1 个答案: