使用说明

安装

npm init -y && npm install @karinjs/puppeteer && npx init && node .
# or
pnpm init && pnpm install @karinjs/puppeteer && npx init && node .
# or
yarn init -y && yarn add @karinjs/puppeteer && npx init && node .

1. 项目配置

./config.json:

{
  "logLevel": "info",
  "headless": false,
  "http": {
    "host": "0.0.0.0",
    "port": 7005,
    "token": "123456"
  },
  "ws": {
    "enable": true,
    "token": "123456",
    "path": "/ws",
    "list": [
      {
        "url": "ws://127.0.0.1:7000/puppeteer",
        "token": "123456"
      }
    ]
  },
  // 浏览器启动数量 启动多个会导致cpu占用过高
  "browserCount": 1,
  // 传递给浏览器的参数
  "args": [
    "--enable-gpu",
    "--no-sandbox",
    "--disable-setuid-sandbox",
    "--no-zygote",
    "--disable-extensions",
    "--disable-dev-shm-usage",
    "--window-size=1920,1080",
    "--force-device-scale-factor=2"
  ]
}

2. http 接口

2.1 ping

请求示例:

curl http://127.0.0.1:7005/ping

2.2 计算 token 的 md5 值

请求示例:

curl http://127.0.0.1:7005/hex/123456

2.3 快速截图(GET)

请求示例:

curl http://127.0.0.1:7005/puppeteer?auth=123456&file=file:///root/1.png
curl http://127.0.0.1:7005/puppeteer?auth=123456&file=http://www.baidu.com

2.4 自定义传参截图(POST)

请求地址: http://127.0.0.1:7005/puppeteer
请求方式: POST
请求参数: json 详细参数查看参数说明
鉴权方式: http 头部authorization字段

{
  "file": "file://D:/karin/puppeteer/test.html",
  "pageGotoParams": {
    "waitUntil": "networkidle2"
  }
}

2.5 模板渲染(POST)

请求地址: http://127.0.0.1:7005/render

这里只是在 2.4 的基础上增加了模板渲染的功能，所有参数不变，新增了data参数，传递给art-template模板的数据

<style>
  .table {
    width: 100%;
    border-collapse: collapse;
  }

  .table th,
  .table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }

  .table th {
    background-color: #4caf50;
    color: white;
  }

  .table .highlight {
    background-color: #f2f2f2;
  }
</style>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>名称</th>
      <th>数量</th>
      <th>价格</th>
      <th>总计</th>
    </tr>
  </thead>
  <tbody>
    {{each items item index}}
    <tr class="{{index % 2 === 0 ? 'highlight' : ''}}">
      <td>{{index + 1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.quantity}}</td>
      <td>{{item.price.toFixed(2)}}</td>
      <td>{{(item.quantity * item.price).toFixed(2)}}</td>
    </tr>
    {{/each}}
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4" style="text-align: right;"><strong>总计</strong></td>
      <td>
        {{items.reduce((sum, item) => sum + item.quantity * item.price,
        0).toFixed(2)}}
      </td>
    </tr>
  </tfoot>
</table>

{
  "file": "file://D:/karin/puppeteer/test.html",
  "pageGotoParams": {
    "waitUntil": "networkidle2"
  },
  "data": {
    "items": [
      {
        "name": "桃子",
        "quantity": 2,
        "price": 10.5
      },
      {
        "name": "苹果",
        "quantity": 1,
        "price": 23.0
      },
      {
        "name": "西瓜",
        "quantity": 3,
        "price": 5.75
      }
    ]
  }
}

启动

# 前台启动
node .

# 查看全部指令
npx k

# 初始化
npx init

# 后台启动 需要全局安装pm2 `npm install -g pm2`
npx k .
npx k app
npx k start

# pm2重启
npx k rs

# pm2停止
npx k stop

# pm2查看日志
npx k log

vue 单组件

<template>
  <div class="profile-card" data-v-component>
    <div class="profile-header">
      <div class="avatar">
        <img :src="avatar" alt="头像" v-if="avatar" />
        <div class="avatar-placeholder" v-else>{{ nameInitial }}</div>
      </div>
      <h2 class="name">{{ name }}</h2>
    </div>

    <div class="profile-info">
      <div class="info-item">
        <span class="label">年龄:</span>
        <span class="value">{{ age }}岁</span>
      </div>
      <div class="info-item">
        <span class="label">职业:</span>
        <span class="value">{{ occupation }}</span>
      </div>
      <div class="info-item">
        <span class="label">所在地:</span>
        <span class="value">{{ location }}</span>
      </div>
      <div class="info-item">
        <span class="label">邮箱:</span>
        <span class="value">{{ email }}</span>
      </div>
    </div>

    <div class="profile-bio">
      <p>{{ bio }}</p>
    </div>
  </div>
</template>

<style scoped>
.profile-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 16px;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: bold;
}

.name {
  font-size: 24px;
  color: #1f2937;
  margin: 0;
  font-weight: 600;
}

.profile-info {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #6b7280;
  font-size: 14px;
}

.value {
  color: #111827;
  font-weight: 500;
  font-size: 14px;
}

.profile-bio {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
  padding: 0 8px;
}
</style>

<script setup>
const name = "张三";
const avatar = "";
const age = 18;
const occupation = "前端工程师";
const location = "北京";
const email = "[email protected]";
const bio = "这是一段个人简介";
</script>

• 将上面的代码保存为test.vue文件
• 使用接口 #2.4 自定义传参截图 post)
• 请求参数如下:

{
  "file": "/root/test.vue",
  "data": {
    "name": "张三",
    "age": 28,
    "occupation": "前端工程师",
    "location": "北京市朝阳区",
    "email": "[email protected]",
    "bio": "热爱技术，专注于前端开发5年，擅长 Vue.js 和 React。工作之余喜欢摄影和旅行，希望能用技术改变世界。",
    "avatar": "https://upload-bbs.miyoushe.com/upload/2023/10/24/80663279/3e83fef3d037b0de8d838cfe53582f5e_2622909253864094745.jpg"
  }
}