如何使用 puppeteer 添加抓取数据到 html

Question

建议：我是第一次尝试这个。

我创建了一个显示公交车时间的 html 页面。为了获得公交车时间，我不得不用 puppeteer 抓取当地的公交服务网站。我确实正确地抓取了下一班公共汽车的时间，但我似乎无法将它添加到我的 html 页面。

我尝试添加脚本标签，其中 src 指向我的 js 文件。我尝试将它们添加到头部，在应该显示时间的 div 中和结束正文标记之前，但我无法显示时间。我尝试将脚本标记中的 js 添加到 html，但没有成功。

//Here's code for scraping in busTimeScraper.js :
  let scrape = async() => {
  const browser = await puppeteer.launch({
    headless: true
  });
  const page = await browser.newPage();
  await page.goto('bustimes.com');    //Dummy website for this eg
  await page.setViewport({width: 1500, height: 1500})
  await page.waitFor(5000);

  const result = await page.evaluate(() => {
     let time = document.querySelector('#RouteTimetable').innerText;
     return {
        time
     }
 });

 browser.close();
 return result;

 };

 scrape().then((value) => {
    var timing = value.time;
    document.querySelector('#Time').innerText=timing;
 });

//The html is :
 <div id="Time">
  <!--<script type="text/javascript" src="busTimeScraper.js">
          </script>-->
 </div>

当我运行 js 文件并对时间变量执行 console.log 时，我可以看到正在抓取的时间。我希望 div 填充相同的时间值，但它只是保持空白

Answer 1

您根本无法使用脚本标记在您的客户端 html 添加您的服务器端 JS 并期望它工作，无论您添加在哪里（在头部、内部元素或关闭主体之前） ;

最简单的解决方案是通过 NodeJsAPI 公开结果（时间变量）并使用 API 通过您的客户端 JS 获取值并完成客户端的其余部分东西。

如何使用 puppeteer 添加抓取数据到 html

How to add scraped data with puppetteer into html

html

node.js

puppeteer