当前位置：首页 > web >正文

Browserless 快速上手

web 2025/5/14 22:08:01

要将你提供的 HTML 模板和数据结构转换为可以用于 Browserless /pdf 接口的 JSON 请求体（且能正确渲染为 PDF），需要满足以下几点：

✅ 最终目标格式（这是能用的格式）：

json

复制编辑

{ "html": "<h1>🚀 N8N 本地部署指南：在你的计算机上部署 N8N，享受无需复杂运维的自动化体验</h1>", "options": { "landscape": false, "printBackground": true, "format": "A4" } }

🧩 解决方案：将数组中每一项转换为 JSON 格式的 HTML 页面

你可以用一个 Code 节点（设置为 Run Once for Each Item）处理每一条记录，例如：

javascript

复制编辑

📌 说明：

title.replace(/^#+\s*/, '') 是为了去掉 Markdown 标题的 # 符号。
text.replace(/\n/g, '<br>') 是为了将 Markdown 中的换行转换为 HTML 中的 <br>，否则段落会粘在一起。
如果你的 text 中还包含图片或链接（如 ![img](url) 或 [text](url)），你也可以进一步用正则进行转换处理。

✅ 最终用于 HTTP Request 节点（POST 到 Browserless）：

配置如下：

Method: POST
URL: https://chrome.browserless.io/pdf?token=xxx
Body Content Type: JSON
Body:
- html: 直接用 Code 节点输出的 html
- options: 直接用 Code 节点输出的 options

要先集成才能用操控浏览器?Puppeteer/Playwright 集成const browser = await puppeteer.connect({ browserWSEndpoint: wss://chrome.browserless.io?token=YOUR_API_KEY });| HTTP 请求到哪里? 截图：POST /screenshot PDF 生成：POST /pdf 网页抓取：POST /scrape

ChatGPT 说：

是的，您需要先集成 Puppeteer 或 Playwright，才能通过这些工具来操控浏览器。

1. 集成 Puppeteer/Playwright 进行浏览器操作

如果您选择通过 Puppeteer 或 Playwright 控制浏览器，您需要首先集成这些库。然后，通过连接到 Browserless 提供的 WebSocket 端点来控制浏览器实例：

代码示例（Puppeteer）：

javascript

复制编辑

const puppeteer = require('puppeteer'); // 引入 Puppeteer 库 // 连接到 Browserless 提供的 WebSocket 端点 const browser = await puppeteer.connect({ browserWSEndpoint: `wss://chrome.browserless.io?token=YOUR_API_KEY` });

解释：

browserWSEndpoint：这是 Browserless 提供的 WebSocket 端点，用于连接到浏览器实例。
YOUR_API_KEY：您在 Browserless 控制台获得的 API 密钥。

同样，如果您使用 Playwright，连接方式类似：

javascript

复制编辑

const { chromium } = require('playwright'); const browser = await chromium.connect({ wsEndpoint: `wss://chrome.browserless.io?token=YOUR_API_KEY` });

这样就可以在您的脚本中操控无头浏览器了。

2. 通过 HTTP 请求进行操作

如果您不想通过 Puppeteer 或 Playwright 编写脚本，您还可以直接通过 HTTP 请求与 Browserless 进行交互。您可以使用普通的 HTTP 请求来实现浏览器截图、PDF 生成等功能。

HTTP 请求地址：

截图：POST /screenshot
PDF 生成：POST /pdf
网页抓取：POST /scrape

3. 如何发送 HTTP 请求

您可以使用任何 HTTP 客户端（如 axios、fetch 等）来发送请求。以下是一个通过 axios 库发送 HTTP 请求的示例：

截图请求示例：

javascript

复制编辑

const axios = require('axios'); axios.post('https://chrome.browserless.io/screenshot', { url: 'https://example.com', token: 'YOUR_API_KEY' }) .then(response => { console.log('Screenshot saved:', response.data); }) .catch(error => { console.error('Error taking screenshot:', error); });

发送请求时需要：

url：要截图的网页 URL。
token：您的 API 密钥，用于认证。

PDF 生成请求：

javascript

复制编辑

axios.post('https://chrome.browserless.io/pdf', { url: 'https://example.com', token: 'YOUR_API_KEY' }) .then(response => { console.log('PDF generated:', response.data); }) .catch(error => { console.error('Error generating PDF:', error); });

网页抓取请求：

javascript

复制编辑

axios.post('https://chrome.browserless.io/scrape', { url: 'https://example.com', token: 'YOUR_API_KEY' }) .then(response => { console.log('Page scraped:', response.data); }) .catch(error => { console.error('Error scraping page:', error); });

总结

如果您使用 Puppeteer 或 Playwright，需要集成相关库并通过 WebSocket 与 Browserless 连接来操作浏览器。
如果您不想编写复杂脚本，也可以直接通过 HTTP 请求进行截图、PDF 生成、网页抓取等操作。每个操作都需要 POST 请求到对应的 HTTP 端点。

希望这些信息对您有所帮助！如果您有更多问题，随时可以提问。

您说：

我希望的是可以别的用户点击我的网站的端点/发送信息触发了我的后端/前端,我调用这个来操控他那边的浏览器可以实现吗?

ChatGPT 说：

是的，您可以实现通过用户点击您网站的端点或发送请求来触发后端与 Browserless 进行交互，从而控制其他用户的浏览器。这种操作通常涉及 前端触发请求 和 后端操控浏览器。下面是如何实现这一目标的基本流程。

实现步骤

前端部分：
前端通过按钮点击等操作向后端发送请求（例如一个 HTTP 请求），触发后端执行相应操作（如启动浏览器，生成截图或抓取网页等）。
后端部分：
后端收到请求后，利用 Browserless API 或 WebSocket 控制浏览器的操作。
Browserless 操作：
后端使用 Browserless API 进行无头浏览器操作，如截图、PDF 生成或抓取网页内容。

详细流程

1. 前端请求发送

前端代码使用 fetch 或 axios 向后端发送请求，触发浏览器操作。

javascript

复制编辑

// 前端请求示例，用户点击按钮触发操作 document.getElementById("actionButton").addEventListener("click", () => { fetch("/api/trigger-browser-action", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "screenshot", // 操作类型，截图或PDF等 url: "https://example.com" // 操作的目标网址 }) }) .then(response => response.json()) .then(data => { console.log("操作成功", data); }) .catch(error => { console.error("操作失败", error); }); });