如何将NodeJS爬虫生成的数组内容展示到HTML的p标签中？

一、爬虫数据展示到HTML p标签的问题 #

方案1：后端模板渲染（推荐快速实现） #

1. 安装EJS模板引擎

npm install ejs

2. 修改index.js配置模板引擎并传递数据

const express = require('express');
const app = express();
const axios = require('axios');
const cheerio = require('cheerio');

// 配置EJS模板引擎
app.set('view engine', 'ejs');
app.set('views', './views');

app.get('/', async (req, res) => {
  try {
    const targetUrl = '你的目标URL';
    const html = await axios.get(targetUrl);
    const $ = cheerio.load(html.data);
    const resultArr = [];
    
    // 替换为你的目标类选择器
    $('.target-class').each((i, el) => {
      resultArr.push($(el).text().trim());
    });
    console.log(resultArr);
    
    // 渲染模板并传递数据
    res.render('index', { data: resultArr });
  } catch (err) {
    console.error('抓取失败:', err);
    res.render('index', { data: [] });
  }
});

app.listen(3000, () => console.log('服务器运行在http://localhost:3000'));

3. 在项目根目录创建views/index.ejs文件

<!DOCTYPE html>
<html>
<head>
  <title>爬虫结果</title>
</head>
<body>
  <h1>抓取内容</h1>
  <% if (data.length) { %>
    <% data.forEach(item => { %>
      <p><%= item %></p>
    <% }) %>
  <% } else { %>
    <p>暂无数据</p>
  <% } %>
</body>
</html>

方案2：前端AJAX请求接口 #

1. 修改index.js提供API接口和静态文件服务

const express = require('express');
const app = express();
const axios = require('axios');
const cheerio = require('cheerio');

// 托管静态文件（index.html放在public文件夹）
app.use(express.static('public'));

// 爬虫API
app.get('/api/scrape', async (req, res) => {
  try {
    const targetUrl = '你的目标URL';
    const html = await axios.get(targetUrl);
    const $ = cheerio.load(html.data);
    const resultArr = [];
    
    $('.target-class').each((i, el) => {
      resultArr.push($(el).text().trim());
    });
    res.json(resultArr);
  } catch (err) {
    res.status(500).json({ error: '抓取失败' });
  }
});

app.listen(3000, () => console.log('服务器运行在http://localhost:3000'));

2. 创建public/index.html文件

<!DOCTYPE html>
<html>
<head>
  <title>爬虫结果</title>
</head>
<body>
  <h1>抓取内容</h1>
  <div id="content"></div>

  <script>
    fetch('/api/scrape')
      .then(res => res.json())
      .then(data => {
        const container = document.getElementById('content');
        if (data.length) {
          data.forEach(item => {
            const p = document.createElement('p');
            p.textContent = item;
            container.appendChild(p);
          });
        } else {
          container.innerHTML = '<p>暂无数据</p>';
        }
      })
      .catch(err => {
        document.getElementById('content').innerHTML = '<p>获取数据失败</p>';
      });
  </script>
</body>
</html>

二、Puppeteer安装权限错误解决方法 #

方法1：修复npm全局目录权限 #

1. 查看npm全局安装目录

npm config get prefix

2. 修改目录权限（适用于macOS/Linux）

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

3. 重新安装Puppeteer

npm install puppeteer

方法2：用nvm管理Node版本（推荐长期解决） #

1. 安装nvm（macOS/Linux）

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Windows用户可下载nvm-windows安装包
2. 安装并使用LTS版本Node

nvm install --lts
nvm use --lts

3. 安装Puppeteer

npm install puppeteer

方法3：临时跳过权限校验 #

npm install puppeteer --unsafe-perm=true

内容的提问来源于stack exchange，提问作者Nate