Export PDF using puppeteer, using button in React

Question

i have an ReactJS app. and the app will generate the pdf using puppeteer,

i run this command to genera the pdf

npm run generate

in my package.json the script is

"generate": "npx babel-node scripts/generate-pdf.js"

in my generate-pdf.js the code like this

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("http://localhost:3000/", {
    waitUntil: "networkidle2",
  });
  await page.emulateMediaType("screen");
  await page.pdf({
    path: "./react.pdf",
    printBackground: true,
    format: "a4",
  });
  await browser.close();
})();

everything goes normally. successfully generated the pdf.

my problem is, how to make button in React to execute the command for generating the pdf file?

Answer 1

You could do something like:

await page.waitForFunction(() => window.buttonClicked)

And then in react:

<button onClick={() => window.buttonClicked = true}/>