nodejs抓取动态网页(完整的使用方式如下最近更新Workflow命令行帮助工具(组图))

　　nodejs抓取动态网页(完整的使用方式如下最近更新Workflow命令行帮助工具(组图))

　　现在越来越多的网页使用前端渲染页面，给爬取工作带来了很大的麻烦。通过通常的方法，我们只能得到一堆js方法或者api接口。当然，我们不希望每个 网站 都如此努力地探索他们的 api。

　　那么有什么更好的方式称呼全能的谷歌老爸，puppeteer可以模拟chrome打开网页，可以截图，转换成pdf文件，当然还可以抓取数据，因为截图的前提是模拟前端渲染效果就像真的打开了网站。

　　本文章主要介绍如何通过puppeteer简单爬取

　　下载

　　1

　　$ yarn add puppeteer

　　采用

　　我们先看一个简单的例子，不问为什么，直接运行代码

　　1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

　　const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('https://www.instagram.com/nike/');

// Get the "viewport" of the page, as reported by the page.

const dimensions = await page.evaluate(() => {

return {

width: document.documentElement.clientWidth,

height: document.documentElement.clientHeight,

title: document.title

};

});

console.log('Dimensions:', dimensions);

await browser.close();

})();

　　运行之后，你会发现它打印出了文档的宽度、高度和标题。现在让我们分析一下这段代码的作用。

　　分析选择器

　　抓取页面时，可以借助谷歌浏览器的开发者工具直接复制选择器

　　

　　我们要获取页面的头像信息。通过开发者工具复制的选择器如下

　　1

　　#react-root > section > main > article > header > div > div > div > img

　　这个时候我们就可以直接使用了

　　1

2

3

　　let avatarSelector = '#react-root > section > main > article > header > div > div > div > img'

let avatarDom = document.querySelector(avatarSelector)

avatar = avatarDom.src

　　这样，我们就可以轻松分析一个dom元素。当然，这样的粘贴复制并不是万能的。很多情况下，我们需要分析页面样式来寻找更好的解析方式。

　　完整用法如下

　　1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

　　

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch({headless: false});

const page = await browser.newPage();

await page.setJavaScriptEnabled(true);

await page.goto('https://www.instagram.com/nike/');

// Get the "viewport" of the page, as reported by the page.

const dimensions = await page.evaluate(() => {

// avatar

let avatarSelector = '#react-root > section > main > article > header > div > div > div > img'

let avatarDom = document.querySelector(avatarSelector)

let avatar = ''

if( avatarDom ){

avatar = avatarDom.src

}

// name

let nameSelector = '#react-root > section > main > article > header > section > div._ienqf > h1'

let nameDom = document.querySelector(nameSelector)

let name = ''

if( nameDom ){

name = nameDom.innerText;

}

return {

avatar: avatar,

name: name,

};

});

console.log('Dimensions:', dimensions);

await browser.close();

})();

　　最近更新

　　Alfred Workflow 命令行帮助工具

　　最近阅读

　　去检查一个数组是否收录一个项目

　　Vim 高级功能 vimgrep 全局搜索文件

　　在北京申请工作和居留许可的一些细节

　　Go 语法错误：函数体外的非声明语句

　　Mac电脑查看字体文件位置