js抓取网页内容(一个和浏览器的区别，安装注意先安装nodejs.eachSeries)

　　js抓取网页内容(一个和浏览器的区别，安装注意先安装nodejs.eachSeries)

　　傀儡师

　　google chrome 团队制作的 puppeteer 是一个自动化测试库，依赖于 nodejs 和chromium。它最大的优点是可以处理网页中的动态内容，比如JavaScript，可以更好的模拟用户。

　　一些网站反爬虫方法在某些javascript/ajax请求中隐藏了部分内容，使得直接获取a标签的方法不起作用。甚至有些网站会设置隐藏元素“陷阱”，用户看不到，脚本触发器被认为是机器。在这种情况下，Puppeteer 的优势就凸显出来了。

　　它可以实现以下功能：

　　生成页面的屏幕截图和 PDF。获取 SPA 并生成预渲染内容（即“SSR”）。自动表单提交、UI 测试、键盘输入等。创建最新的自动化测试环境。使用最新的 JavaScript 和浏览器功能直接在最新版本的 Chrome 中运行测试。捕获并跟踪您的时间线 网站 以帮助诊断性能问题。

　　开源地址：

　　安装

　　npm i puppeteer

　　注意先安装nodejs，在nodejs文件的根目录下执行（npm文件同级）。

　　安装过程中会下载Chromium，大约120M。

　　花了两天时间（约10小时）探索绕过了相当多的异步坑。作者对puppeteer和nodejs有一定的掌握。

　　一张长图，抢博客文章列表：

　　

　　抢博客文章

　　以csdn博客为例，文章的内容需要点击“阅读全文”才能获取，导致只能读取dom的脚本失败。

　　/**

* load blog.csdn.net article to local files

**/

const puppeteer = require('puppeteer');

//emulate iphone

const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1';

const workPath = './contents';

const fs = require("fs");

if (!fs.existsSync(workPath)) {

fs.mkdirSync(workPath)

}

//base url

const rootUrl = 'https://blog.csdn.net/';

//max wait milliseconds

const maxWait = 100;

//max loop scroll times

const makLoop = 10;

(async () => {

let url;

let countUrl=0;

const browser = await puppeteer.launch({headless: false});//set headless: true will hide chromium UI

const page = await browser.newPage();

await page.setUserAgent(userAgent);

await page.setViewport({width:414, height:736});

await page.setRequestInterception(true);

//filter to block images

page.on('request', request => {

if (request.resourceType() === 'image')

request.abort();

else

request.continue();

});

await page.goto(rootUrl);

for(let i= 0; iwindow.scrollTo(0, document.body.scrollHeight));

await page.waitForNavigation({timeout:maxWait,waitUntil: ['networkidle0']});

}catch(err){

console.log('scroll to bottom and then wait '+maxWait+'ms.');

}

}

await page.screenshot({path: workPath+'/screenshot.png',fullPage: true, quality :100, type :'jpeg'});

//#feedlist_id li[data-type="blog"] a

const sel = '#feedlist_id li[data-type="blog"] h2 a';

const hrefs = await page.evaluate((sel) => {

let elements = Array.from(document.querySelectorAll(sel));

let links = elements.map(element => {

return element.href

})

return links;

}, sel);

console.log('total links: '+hrefs.length);

process();

async function process(){

if(countUrl {

if (request.resourceType() === 'image')

request.abort();

else

request.continue();

});

await tab.goto(url);

//execute tap request

try{

await tab.tap('.read_more_btn');

}catch(err){

console.log('there\'s none read more button. No need to TAP');

}

let title = await tab.evaluate(() => document.querySelector('#article .article_title').innerText);

let contents = await tab.evaluate(() => document.querySelector('#article .article_content').innerText);

contents = 'TITLE: '+title+'\nURL: '+url+'\nCONTENTS: \n'+contents;

const fs = require("fs");

fs.writeFileSync(workPath+'/'+tab.url().substring(tab.url().lastIndexOf('/'),tab.url().length)+'.txt',contents);

console.log(title + " has been downloaded to local.");

await tab.close();

}catch(err){

console.log('url: '+tab.url()+' \n'+err.toString());

}finally{

process();

}

}

})();

　　实施过程

　　录屏可以在我的公众号查看。下面是一个屏幕截图：

　　

　　

　　结果

　　文章内容列表：

　　

　　文章内容：

　　结束语

　　我以为由于nodejs使用JavaScript脚本语言，它肯定可以处理网页的JavaScript内容，但我还没有找到合适/高效的库。直到找到木偶师，我才下定决心试水。

　　话虽如此，nodejs的异步性确实让人头疼。我已经在 10 个小时内抛出了大约数百行代码。

　　您可以扩展代码中的 process() 方法以使用 async.eachSeries。我使用的递归方法不是最佳解决方案。

　　其实一一处理是没有效率的。本来我写了一个异步的方法来关闭浏览器：

<p>let tryCloseBrowser = setInterval(function(){

console.log("check if any process running...")

if(countDown