Как напечатать React компонент одним нажатием кнопки?

Question

Как распечатать только один компонент одним нажатием кнопки.

Я знаю, что это решение:

window.frames["print_frame"].window.focus(); 
window.frames["print_frame"].window.print(); 
$('.print_frame').remove(); 

Но Реагировать не хочет работать с рамой.

Любые решения? Спасибо.

Answer 1

Существует несколько вариантов решения на клиенте. Один из них с кадрами, как вы опубликовали. Вы можете использовать IFRAME, хотя:

var content = document.getElementById("divcontents"); 
var pri = document.getElementById("ifmcontentstoprint").contentWindow; 
pri.document.open(); 
pri.document.write(content.innerHTML); 
pri.document.close(); 
pri.focus(); 
pri.print(); 

Это ожидает, что этот HTML существует

<iframe id="ifmcontentstoprint" style="height: 0px; width: 0px; position: absolute"></iframe> 

Другим решением является использование селектора средств массовой информации, так и на media="print" стили скрыть все, что вы не хотите, чтобы напечатать ,

<style type="text/css" media="print"> 
    .no-print { display: none; } 
</style> 

Последний способ требует некоторой работы на сервере. Вы можете отправить все HTML + CSS на сервер и использовать один из многих компонентов для создания документа для печати, такого как PDF. Я пробовал настройки с помощью PhantomJs.

Answer 2

Я думал, что это будет сложнее, чем оказалось. Вы должны будете укладывать распечатку с media @print {} в CSS, но простой коде:

export default class Component extends Component { 
 

 
    print(){ 
 
    window.print(); 
 
    } 
 
    
 
    
 
    render() { 
 
    
 
    ... 
 
    <span className="print" 
 
       onClick={this.print}> 
 
    PRINT 
 
    </span> 
 
    
 
    } 
 
    
 
}

Надеется, что это полезно!

Answer 3

Если вы хотите распечатать определенные данные, к которым у вас уже есть доступ, будь то из магазина, AJAX или доступны в другом месте, вы можете использовать функцию обратной печати в библиотеке.

https://github.com/captray/react-print

Это позволяет создавать шаблоны для печати гораздо проще (если у вас уже есть зависимость от реакции). Вам просто нужно пометить свой HTML соответствующим образом.

Этот идентификатор должен быть добавлен выше в вашем фактическом дереве DOM, чтобы исключить все, кроме «установки для печати» ниже.

<div id="react-no-print"> 

Это где ваш компонент реагировать-печать будет монтировать и обернуть шаблон, который вы создаете:

<div id="print-mount"></div> 

пример выглядит примерно так:

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

var MyTemplate = React.createClass({ 
    render() { 
     return (
      <PrintTemplate> 
       <p>Your custom</p> 
       <span>print stuff goes</span> 
       <h1>Here</h1> 
      </PrintTemplate> 
     ); 
    } 
}); 

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

Стоит отметить, что вы можете создавать новые или использовать существующие дочерние компоненты внутри вашего шаблона, и все должно выглядеть отлично для печати.

Answer 4

19/7/2017 Это работало идеально для меня.

import React, {Component} from 'react' 


class PrintThisComponent extends Component { 

    componentDidMount() { 

    console.log('PrintThisComponent mounted!') 

    } 

    render() { 

    return (
     <div> 

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

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

     </div> 

    ) 
    } 
} 

export default PrintThisComponent