Reactjs 我想通过Puppeter传递一组数据来呈现react-vis组件，而不是在html模板中传递数据？
我想通过Puppeter传递一组数据来呈现react-vis组件，而不是在html模板中传递数据？我已经附加了两个文件，一个是木偶文件，另一个是HTML模板文件？ 我是Puppeter新手，找不到任何可以构建的示例，所以我需要帮助使用Puppeter将数据传递到HTML模板中 pdfTest.jsReactjs 我想通过Puppeter传递一组数据来呈现react-vis组件，而不是在html模板中传递数据？,reactjs,puppeteer,react-vis,Reactjs,Puppeteer,React Vis,我想通过Puppeter传递一组数据来呈现react-vis组件，而不是在html模板中传递数据？我已经附加了两个文件，一个是木偶文件，另一个是HTML模板文件？ 我是Puppeter新手，找不到任何可以构建的示例，所以我需要帮助使用Puppeter将数据传递到HTML模板中 pdfTest.js const puppeteer = require('puppeteer') const pdfGenerate = async () => { const browser = await
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()
<!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>
反应应用程序
常数{XYPlot，
VerticalBarSeries}=reactVis
var Box=React.createClass({
渲染：函数（）{
常数数据=[
{“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”}
]
常量图表宽度=800；
常数图表高度=500；
常量chartDomain=[0，chartHeight]；
返回(
);
}
});
ReactDOM.render（，document.getElementById（'app'））；
setDatadrawpuppeter。评估并调用您的setData（passedData）
和draw
waitUntil