### 使用 TypeScript 和 Playwright 实现表格数据转换为 JSON 并自动填充到网页输入框 以下是一个完整的实现方案，展示如何使用 TypeScript 和 Playwright 将表格数据转换为 JSON 格式，并将其自动填充到网页的对应输入框中。 #### 1. 安装依赖 首先需要安装 Playwright 和其 TypeScript 类型定义： ```bash npm install playwright @types/playwright ``` #### 2. 编写代码 以下是完整的 TypeScript 和 Playwright 实现代码： ```typescript import { chromium } from 'playwright'; async function main() { // 启动浏览器实例 const browser = await chromium.launch({ headless: false }); const context = await browser.newContext(); const page = await context.newPage(); // 导航到目标页面 await page.goto('file:///path/to/your/html/file.html'); // 替换为实际HTML文件路径 // 获取表格数据并转换为JSON const tableData = await page.evaluate(() => { const table = document.getElementById('myTable'); const rows = Array.from(table.querySelectorAll('tbody tr')); return rows.map(row => Array.from(row.querySelectorAll('td')).map(cell => cell.innerText) ); }); console.log("提取的表格数据:", tableData); // 打印表格数据[^1] // 填充表单 const jsonData = JSON.stringify(tableData[0]); // 转换为JSON字符串 console.log("JSON格式的数据:", jsonData); // 打印JSON数据[^2] // 自动填充表单 await page.evaluate((data) => { const form = document.getElementById('myForm'); const inputs = form.querySelectorAll('input'); data.forEach((value, index) => { if (inputs[index]) { inputs[index].value = value; } }); }, tableData[0]); // 关闭浏览器 await browser.close(); } main().catch(err => console.error(err)); ``` #### 3. HTML 示例 为了测试上述代码，可以使用以下 HTML 文件作为示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格数据转换与填充</title> </head> <body> <table id="myTable" border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Alice</td> <td>25</td> </tr> <tr> <td>2</td> <td>Bob</td> <td>30</td> </tr> </tbody> </table> <form id="myForm"> <label>ID: <input type="text" name="id"></label><br> <label>Name: <input type="text" name="name"></label><br> <label>Age: <input type="number" name="age"></label><br> </form> </body> </html> ``` #### 4. 代码解释 - **启动浏览器**：使用 `chromium.launch` 方法启动浏览器实例。 - **导航到页面**：通过 `page.goto` 方法导航到包含表格和表单的 HTML 页面。 - **提取表格数据**：通过 `page.evaluate` 方法在页面上下文中运行 JavaScript，提取表格中的所有行和单元格内容，并将其转换为二维数组。 - **转换为 JSON**：将提取的表格数据转换为 JSON 格式，并打印以验证结果。 - **填充表单**：通过 `page.evaluate` 方法将提取的数据逐个填充到表单的输入框中。 - **关闭浏览器**：完成操作后，调用 `browser.close` 方法关闭浏览器实例。 ###