今回はReactで表示したブラウザ画面を印刷する方法を書きます。
ReactToPrintというプラグインを使用します。
Contents
ReactToPrintのインストール
npm install --save react-to-printComponentToPrint.jsファイルを作成して、関数の機能を次のように記述します。
import React from 'react';
export const ComponentToPrint = React.forwardRef((props, ref) => {
return (
<div ref={ref}>この文字が印刷されるよ！</div>
);
});Print.jsファイルを作成して、次のように記述します。
import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';
import { ComponentToPrint } from './ComponentToPrint';
const Print = () => {
const componentRef = useRef();
const handlePrint = useReactToPrint({
content: () => componentRef.current,
});
return (
<div>
<ComponentToPrint ref={componentRef} />
<button onClick={handlePrint}>印刷ボタン</button>
</div>
);
};
export default PrintApp.jsを次のように変更します。
import './App.css';
import Print from './Print'
function App() {
return (
<div className="App">
<Print />
</div>
);
}
export default App;これで完成です。ブラウザを確認すると次のような印刷ボタンと文字が表示されます。
印刷ボタンを押すとブラウザ画面を印刷することができます。
まとめ
今回はReactでブラウザ画面を印刷する方法を書きました。
公式サイトには、クラスでの記述方法やさまざまなオプション機能の加え方が紹介されていますので、必要に応じて追加してみるとよいですね。
最後までお読みいただきありがとうございました。