npm i react-screen-capture
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import React, { useState } from 'react'; import { ScreenCapture } from 'react-screen-capture'; const App = () => { const [screenCapture, setScreenCapture] = useState(''); const handleScreenCapture = (capture) => { setScreenCapture(capture); }; const handleSave = () => { const downloadLink = document.createElement('a'); const fileName = 'react-screen-capture.png'; downloadLink.href = screenCapture; downloadLink.download = fileName; downloadLink.click(); }; return ( <ScreenCapture onEndCapture={handleScreenCapture}> {({ onStartCapture }) => ( <div> <button onClick={onStartCapture}>Capture</button> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam distinctio exercitationem a tempore delectus ducimus necessitatibus dolor voluptatum aut est quaerat aspernatur, vero quod aperiam odio. Exercitationem distinctio in voluptates? </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut molestiae deserunt voluptas, labore a expedita error eligendi sunt fugit, nesciunt ullam corrupti quas natus, officia rerum? Officia cum amet quidem. </p> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, iusto repellat quae quos in rerum sunt obcaecati provident placeat hic saepe possimus eaque repellendus consequuntur quisquam nihil, sit ullam ratione. </p> <center> {screenCapture && ( <> <img src={screenCapture} alt="react-screen-capture" /> <p> <button onClick={handleSave}>Download</button> </p> </> )} </center> </div> )} </ScreenCapture> ); }; export default App; |
