我想通过 puppeteer 传递一组数据来渲染一个 react-vis 组件，而不是在 html 模板中传递数据？

Question

我想通过 puppeteer 传递一组数据来呈现 react-vis 组件，而不是在 html 模板中传递数据？我附上了两个文件，其中一个是 puppeteer 文件，另一个是 HTML react-vis 的模板文件？我是 Puppeteer 的新手，找不到任何可以构建的示例，所以我需要帮助使用 puppeteer 将该数据传递到 HTML 模板。

pdfTest.js

const puppeteer = require('puppeteer')
const pdfGenerate = async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'], headless: true})
  const page = await browser.newPage()
  await page.goto('file://C:/Users/Anurag/report_table/src/Component/test.html',
    { waitUntil: 'networkidle2' })
  await page.pdf({
    path: 'Test2.pdf',
    width: '940px',
    height: '680px',
  })
  await browser.close()
}
pdfGenerate()

reactVis.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/react-vis@1.6.7/dist/dist.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
    const {  XYPlot,
      VerticalBarSeries } = reactVis

  var Box = React.createClass({
    render: function () {
      const data = [
        { "y": 100, "x": "Jan" },
        { "y": 112, "x": "Feb" },
        { "y": 230, "x": "Mar" },
        { "y": 268, "x": "Apr" },
        { "y": 300, "x": "May" },
        { "y": 310, "x": "Jun" },
        { "y": 315, "x": "Jul" },
        { "y": 340, "x": "Aug" },
        { "y": 388, "x": "Sep" },
        { "y": 404, "x": "Oct" },
        { "y": 442, "x": "Nov" },
        { "y": 447, "x": "Dec" }
      ]
      const chartWidth = 800;
      const chartHeight = 500;
      const chartDomain = [0, chartHeight];
      return (
        <XYPlot
          xType="ordinal"
          width={chartWidth}
          height={chartHeight}
          yDomain={chartDomain}
        >
          <VerticalBarSeries
            data={data}
          />
        </XYPlot>
      );
    }
  });

  ReactDOM.render(<Box />, document.getElementById('app'));
</script>
</body>
</html>

Answer 1

在你的 html javascript

setData

draw

将您的数据传递到 puppeteer.evaluate 并调用您的 setData(passedData) 和 draw
不要忘记添加一个 waitUntil 来渲染

我想通过 puppeteer 传递一组数据来渲染一个 react-vis 组件，而不是在 html 模板中传递数据？

I want to pass set of data through puppeteer to render a react-vis component instead of passing data in html template?

reactjs

react-vis

puppeteer