使用ReactJS創建打印頁面

製作打印頁面的方式必須不那麼強悍，然後按照我一直在做的方式。（見下面的代碼）。因爲我的網站的其餘部分是用ReactJS編寫的，可能以某種方式使用ReactJS和DOM插入？（請參閱下面的第二個示例）我嘗試過使用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創建打印頁面

回答

相關問題