1

我想通过 puppeteer 传递一组数据来呈现 react-vis 组件，而不是在 html 模板中传递数据？我附上了两个文件，其中一个是 puppeteer 文件，另一个是 react-vis 的 HTML 模板文件？我是 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>
4

1 回答 1

2
  1. 公开setData并draw在您的 html javascript 中
  2. 将您的数据传入puppeteer.evaluate并调用您的setData(passedData)和draw
  3. 不要忘记waitUntil为它添加一个渲染
于 2019-12-16T13:18:53.237 回答