印刷に反応しやすい印刷

導入
これは、通常のJavaScriptを使用して簡単ですprint() ウィンドウの全体またはページの印刷をトリガーする方法.
しかし、我々は常にそれを望んでいない.我々は、そのウェブサイトの一部を印刷することに興味があるかもしれません.実際、印刷ボタンをクリックするまで、印刷したい部分をユーザーに表示することさえ望まないかもしれません.これらすべてを行うには、まだその部分のスタイルを維持したい.
すべてのこれらの問題を使用して反応で修正されているReact-To-Print NPMパッケージ私はあなたが印刷するために反応を使って印刷することができて、CSSスタイルを維持している間、印刷されているコンポーネントさえ隠す方法を示すでしょう.

何が印刷に反応しますか?
これはエンドユーザに、CSSスタイルをコピーした印刷ウィンドウをポップアップすることで、コンポーネントの内容をプリントアウトする能力を与えることを目的としたNPMパッケージです.

前提条件
このチュートリアルではJavaScript and React 特にdifference between class and functional component .

スタータープロジェクト
我々は、このチュートリアルのスタータープロジェクトとしてアプリを使用されます.ローカルマシンでプロジェクト設定を取得するには、次の手順を実行します.

クローンrepo

git clone https://github.com/EBEREGIT/react-auth

依存関係をインストールする

npm install

ブラウザにプロジェクトをロードする

npm start

You should have this view on your browser now

すごい!

印刷するコンポーネントの構築

望ましいコンポーネントの印刷をトリガーするボタンを含むコンポーネントを作成する

import React, { useRef } from "react";
import { Button } from "react-bootstrap";
import ReactToPrint from "react-to-print";

export default function PrintComponent() {
  let componentRef = useRef();

  return (
    <>
      <div>
        {/* button to trigger printing of target component */}
        <ReactToPrint
          trigger={() => <Button>Print this out!</Button>}
          content={() => componentRef}
        />

        {/* component to be printed */}
        <ComponentToPrint ref={(el) => (componentRef = el)} />
      </div>
    </>
  );
}

From the code above, we imported the ReactToPrint library, then we called the ReactToPrint component in the body. The ReactToPrint holds the trigger (this can be a button or what so ever we choose) and the content (this is a reference to the component that is to be printed).

下にReactToPrint コンポーネントは、ref 接続するReactToPrint コンテンツ小道具.
さあ、ビルドしましょうComponentToPrint 次のコードを含むコンポーネント

class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h2 style={{color: "green"}}>Attendance</h2>
        <table>
          <thead>
            <th>S/N</th>
            <th>Name</th>
            <th>Email</th>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Njoku Samson</td>
              <td>samson@yahoo.com</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Ebere Plenty</td>
              <td>ebere@gmail.com</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Undefined</td>
              <td>No Email</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

次のスタイルを追加しますindex.css

thead th {
  padding-right: 50px;
}

コンポーネントをfreeComponent.js ファイル:

<PrintComponent />

次のようにファイルの先頭にコンポーネントをインポートすることを忘れないでください.

import PrintComponent from "./PrintComponent";

さて、http://localhost:3000/free 次の画面が必要です.

青色のボタンをクリックすると、印刷プレビューとの印刷対話をする必要があります

印刷プレビューは、私たちが印刷したいコンポーネントとCSSスタイルが残されていないことに注意してください.すごい!

印刷するコンポーネントの非表示
場合によっては、印刷ボタンがクリックされるまで印刷されるべきものを見ることができません.これは、請求書、領収書などを生成しているときに便利です.これを起こすためにはPrintComponent コンポーネントPrintComponent.js ファイル.
置換<ComponentToPrint ref={(el) => (componentRef = el)} /> 次のコード

  <div style={{ display: "none" }}>
     <ComponentToPrint ref={(el) => (componentRef = el)} />
  </div>

You should have the following screen now:

以下のような印刷ボタンをクリックすると、同じ結果が得られます.

信じられない!

重要な通知!
トリガーコンポーネント(PrintComponent 私たちの場合では、機能的であるかクラス構成要素であるかもしれませんが、印刷されるべきコンポーネントComponentToPrint 私たちの場合では、それが働くためにクラス構成要素でなければなりません.

結論
我々は非常に簡単に反応で印刷を行う方法を確認することができました.我々が欲しいコンポーネントだけを印刷することができるだけでなく、コンポーネントを隠すこともできます、そして、CSSスタイルは影響を受けません.
私たちが触れていなかったが、ドキュメンテーションで利用できる他の多くの機能が、あります.私はあなたの時間を取るし、ドキュメントを見て、他の機能を再生し、何を考え出すことができます参照してください.
全コードhere