制作打印页面必须采用不那么强力的方式,就像我一直在做的那样。 (见下面的代码)。也许以某种方式使用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);
答案 0 :(得分:0)
是的,结帐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'));