Chụp màn hình với ReactJs

Đơn giản mà sử dụng thư viện thôi

Có 2 cái thư viện bạn có thể xài để thực hiện task này là: puppeteer và html2canvas

Đại ý thì ý tưởng nó sẽ là vầy ko chính xác 100% đâu nhưng có thể tham khảo:

async function captureScreenshot(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' });

  const screenshot = await page.screenshot({ fullPage: true });

  await browser.close();
  return screenshot;
}

function App() {
  const handleButtonClick = useCallback(async () => {
    const url = 'trangB'; // URL của trang B
    const screenshot = await captureScreenshot(url);

    const link = document.createElement('a');
    link.href = URL.createObjectURL(new Blob([screenshot.buffer], { type: 'image/png' }));
    link.download = 'screenshot.png';
    link.click();
  }, []);

  return (
    <div>
      <h1>Trang A</h1>
      <button onClick={handleButtonClick}>Chụp ảnh trang B</button>
    </div>
  );
}

Cách sử dụng thư viện cụ thể bạn vào trang https://pptr.dev/ và https://html2canvas.hertzen.com/ để tham khảo thêm nhé.