javascript - 如何从 pupeteer 抓取的表中输出正确的 json?
问题描述
我是 pupeteer 的新手,不知道它的全部潜力。我有以下代码从抓取返回结果。但格式是一个长制表符分隔的字符串。我正在尝试获取正确的 json。
(async () => {
const browser = await puppeteer.launch( {headless: true} );
const page = await browser.newPage();
await page.goto(url, {waitUntil: 'networkidle0'});
let data = await page.evaluate(() => {
const table = Array.from(document.querySelectorAll('table[id="gvM"] > tbody > tr '));
return table.map(td => td.innerText);
})
console.log(data);
})();
这是html表:
<table cellspacing="0" cellpadding="4" rules="all" border="1" id="gvM" >
<tr >
<th scope="col">#</th><th scope="col">Resource</th><th scope="col">EM #</th><th scope="col">CVO</th><th scope="col">Start</th><th scope="col">End</th><th scope="col">Status</th><th scope="col">Assignment</th><th scope="col"> </th>
</tr>
<tr >
<td>31</td><td>Smith</td><td>618</td><td align="center"><span class="aspNetDisabled"><input id="gvM_ctl00_0" type="checkbox" name="gvM$ctl02$ctl00" disabled="disabled" /></span></td><td> </td><td> </td><td>AVAILABLE EXEC</td><td style="width:800px;">6F</td><td align="center"></td>
</tr>
<tr style="background-color:LightGreen;">
<td>1</td><td>John</td><td>604</td><td align="center"><span class="aspNetDisabled"></span></td><td>1400</td><td>2200</td><td>AVAILABLE</td><td style="width:800px;"> </td><td align="center"></td>
</tr>
</table>
这就是我得到的:
[ '#\tResource\tEM #\tCVO\tStart\tEnd\tStatus\tAssignment\t ',
'31\tSmith\t618\t\t \t \tAVAILABLE EXEC\t6F\t',
'1\tJohn\t604\t\t1400\t2200\tAVAILABLE\t \t']
这就是我想要得到的:
[{'#','Resource','EM', '#','CVO','Start','tEnd','Status', 'Assignment'},
{'31','Smith', '618',' ',' ',' ',' ','AVAILABLE EXEC','6F'},
{'1','John', '604',' ',' ','1400 ','2200','AVAILABLE', ' '}]
我应用了下面的答案,但我无法重现结果。也许我做错了什么。你能解释一下我怎么搞砸了吗?
const context = document.querySelectorAll('table[id="gvM"] > tbody > tr ');
const query = (selector, context) => Array.from(context.querySelectorAll(selector));
console.log(
query('tr', context).map(row =>
query('td, th', row).map(cell =>
cell.textContent))
);
这个错误是什么意思?
(node:6204) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with. .catch(). (rejection id: 1)
(node:6204) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
解决方案
如果您需要表中的数组数组,您可以尝试这种方法,将所有行映射到行数组,将所有单元格映射到行元素内的单元格数组(此变体使用Array.from()
映射函数作为第二个参数) :
const data = await page.evaluate(
() => Array.from(
document.querySelectorAll('table[id="gvM"] > tbody > tr'),
row => Array.from(row.querySelectorAll('th, td'), cell => cell.innerText)
)
);
推荐阅读
- android - Android 应用仅使用 google 登录(无电子邮件选项)
- python - 如何制作一个为它们命名的按钮网格(即使我用“for”创建它们)
- java - checkstyle 使用的默认规则是什么?
- html - z-index 不适用于元素的绝对定位
- tableau-api - Tableau 在计算中排除列
- javascript - axios url 请求的相对路径需要本地但非托管服务器的“/”前缀
- grpc - 在 grpc 中使用连接保持活动来阻塞存根
- apache-kafka - 雪花卡夫卡连接器配置问题
- vue.js - VueJs将非反应性道具从父级添加到自定义组件?
- android - 我怎样才能为我的屏幕的某个部分实现一个viewpager?