使用Node.js爬取任意網(wǎng)頁(yè)資源并輸出高質(zhì)量PDF文件到本地~
本文適合無(wú)論是否有爬蟲(chóng)以及Node.js基礎(chǔ)的朋友觀看~
需求：
- 使用Node.js爬取網(wǎng)頁(yè)資源，開(kāi)箱即用的配置
- 將爬取到的網(wǎng)頁(yè)內(nèi)容以PDF格式輸出
如果你是一名技術(shù)人員，那么可以看我接下來(lái)的文章，否則，請(qǐng)直接移步到我的github倉(cāng)庫(kù)，直接看文檔使用即可
倉(cāng)庫(kù)地址:附帶文檔和源碼,別忘了給個(gè)star哦
本需求使用到的技術(shù)：Node.js和puppeteer
- puppeteer 官網(wǎng)地址: puppeteer地址
- Node.js官網(wǎng)地址:鏈接描述
- Puppeteer是谷歌官方出品的一個(gè)通過(guò)DevTools協(xié)議控制headless Chrome的Node庫(kù)?？梢酝ㄟ^(guò)Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來(lái)進(jìn)行UI Test或者作為爬蟲(chóng)訪問(wèn)頁(yè)面來(lái)收集數(shù)據(jù)。
- 環(huán)境和安裝
- Puppeteer本身依賴6.4以上的Node，但是為了異步超級(jí)好用的async/await，推薦使用7.6版本以上的Node。另外headless Chrome本身對(duì)服務(wù)器依賴的庫(kù)的版本要求比較高，centos服務(wù)器依賴偏穩(wěn)定，v6很難使用headless Chrome，提升依賴版本可能出現(xiàn)各種服務(wù)器問(wèn)題（包括且不限于無(wú)法使用ssh），***使用高版本服務(wù)器。（建議使用***版本的Node.js）
小試牛刀，爬取京東資源
- const puppeteer = require('puppeteer'); // 引入依賴
- (async () => { //使用async函數(shù)***異步
- const browser = await puppeteer.launch(); //打開(kāi)新的瀏覽器
- const page = await browser.newPage(); // 打開(kāi)新的網(wǎng)頁(yè)
- await page.goto('https://www.jd.com/'); //前往里面 'url' 的網(wǎng)頁(yè)
- const result = await page.evaluate(() => { //這個(gè)result數(shù)組包含所有的圖片src地址
- let arr = []; //這個(gè)箭頭函數(shù)內(nèi)部寫(xiě)處理的邏輯
- const imgs = document.querySelectorAll('img');
- imgs.forEach(function (item) {
- arr.push(item.src)
- })
- return arr
- });
- // '此時(shí)的result就是得到的爬蟲(chóng)數(shù)據(jù)，可以通過(guò)'fs'模塊保存'
- })()
- 復(fù)制過(guò)去 使用命令行命令 ` node 文件名 ` 就可以運(yùn)行獲取爬蟲(chóng)數(shù)據(jù)了
- 這個(gè) puppeteer 的包 ，其實(shí)是替我們開(kāi)啟了另一個(gè)瀏覽器，重新去開(kāi)啟網(wǎng)頁(yè)，獲取它們的數(shù)據(jù)。
- 上面只爬取了京東首頁(yè)的圖片內(nèi)容，假設(shè)我的需求進(jìn)一步擴(kuò)大，需要爬取京東首頁(yè)
中的所有<a> 標(biāo)簽對(duì)應(yīng)的跳轉(zhuǎn)網(wǎng)頁(yè)中的所有 title的文字內(nèi)容，***放到一個(gè)數(shù)組中。
- 我們的async函數(shù)上面一共分了五步， 只有 puppeteer.launch() ,
- browser.newPage(), browser.close() 是固定的寫(xiě)法。
- page.goto 指定我們?nèi)ツ膫€(gè)網(wǎng)頁(yè)爬取數(shù)據(jù)，可以更換內(nèi)部url地址，也可以多次
調(diào)用這個(gè)方法。
- page.evaluate 這個(gè)函數(shù)，內(nèi)部是處理我們進(jìn)入想要爬取網(wǎng)頁(yè)的數(shù)據(jù)邏輯
- page.goto和 page.evaluate兩個(gè)方法，可以在async內(nèi)部調(diào)用多次，
那意味著我們可以先進(jìn)入京東網(wǎng)頁(yè)，處理邏輯后，再次調(diào)用page.goto這個(gè)函數(shù)，
注意，上面這一切邏輯，都是puppeteer這個(gè)包幫我們?cè)诳床灰?jiàn)的地方開(kāi)啟了另外一個(gè)
瀏覽器，然后處理邏輯，所以最終要調(diào)用browser.close()方法關(guān)閉那個(gè)瀏覽器。
這時(shí)候我們對(duì)上一篇的代碼進(jìn)行優(yōu)化，爬取對(duì)應(yīng)的資源。
- const puppeteer = require('puppeteer');
- (async () => {
- const browser = await puppeteer.launch();
- const page = await browser.newPage();
- await page.goto('https://www.jd.com/');
- const hrefArr = await page.evaluate(() => {
- let arr = [];
- const aNodes = document.querySelectorAll('.cate_menu_lk');
- aNodes.forEach(function (item) {
- arr.push(item.href)
- })
- return arr
- });
- let arr = [];
- for (let i = 0; i < hrefArr.length; i++) {
- const url = hrefArr[i];
- console.log(url) //這里可以打印
- await page.goto(url);
- const result = await page.evaluate(() => { //這個(gè)方法內(nèi)部console.log無(wú)效
- return $('title').text(); //返回每個(gè)界面的title文字內(nèi)容
- });
- arr.push(result) //每次循環(huán)給數(shù)組中添加對(duì)應(yīng)的值
- }
- console.log(arr) //得到對(duì)應(yīng)的數(shù)據(jù) 可以通過(guò)Node.js的 fs 模塊保存到本地
- await browser.close()
- })()
上面有天坑 page.evaluate函數(shù)內(nèi)部的console.log不能打印，而且內(nèi)部不能獲取外部的變量,只能return返回，
使用的選擇器必須先去對(duì)應(yīng)界面的控制臺(tái)實(shí)驗(yàn)過(guò)能不能選擇DOM再使用，比如京東無(wú)法使用querySelector。這里由于
京東的分界面都使用了jQuery，所以我們可以用jQuery，總之他們開(kāi)發(fā)能用的選擇器，我們都可以用，否則就不可以。
接下來(lái)我們直接來(lái)爬取Node.js的官網(wǎng)首頁(yè)然后直接生成PDF
無(wú)論您是否了解Node.js和puppeteer的爬蟲(chóng)的人員都可以操作，請(qǐng)您一定萬(wàn)分仔細(xì)閱讀本文檔并按順序執(zhí)行每一步
本項(xiàng)目實(shí)現(xiàn)需求：給我們一個(gè)網(wǎng)頁(yè)地址，爬取他的網(wǎng)頁(yè)內(nèi)容，然后輸出成我們想要的PDF格式文檔，請(qǐng)注意，是高質(zhì)量的PDF文檔
- ***步，安裝Node.js ,推薦http://nodejs.cn/download/，Node.js的中文官網(wǎng)下載對(duì)應(yīng)的操作系統(tǒng)包
- 第二步，在下載安裝完了Node.js后， 啟動(dòng)windows命令行工具(windows下啟動(dòng)系統(tǒng)搜索功能，輸入cmd，回車(chē)，就出來(lái)了)
- 第三步 需要查看環(huán)境變量是否已經(jīng)自動(dòng)配置,在命令行工具中輸入 node -v，如果出現(xiàn) v10. ***字段，則說(shuō)明成功安裝Node.js
- 第四步 如果您在第三步發(fā)現(xiàn)輸入node -v還是沒(méi)有出現(xiàn) 對(duì)應(yīng)的字段，那么請(qǐng)您重啟電腦即可
- 第五步 打開(kāi)本項(xiàng)目文件夾，打開(kāi)命令行工具（windows系統(tǒng)中直接在文件的url地址欄輸入cmd就可以打開(kāi)了），輸入 npm i cnpm nodemon -g
- 第六步 下載puppeteer爬蟲(chóng)包，在完成第五步后，使用cnpm i puppeteer --save 命令 即可下載
- 第七步 完成第六步下載后，打開(kāi)本項(xiàng)目的url.js，將您需要爬蟲(chóng)爬取的網(wǎng)頁(yè)地址替換上去(默認(rèn)是http://nodejs.cn/)
- 第八步 在命令行中輸入 nodemon index.js 即可爬取對(duì)應(yīng)的內(nèi)容，并且自動(dòng)輸出到當(dāng)前文件夾下面的index.pdf文件中
TIPS: 本項(xiàng)目設(shè)計(jì)思想就是一個(gè)網(wǎng)頁(yè)一個(gè)PDF文件，所以每次爬取一個(gè)單獨(dú)頁(yè)面后，請(qǐng)把index.pdf拷貝出去，然后繼續(xù)更換url地址，繼續(xù)爬取，生成新的PDF文件，當(dāng)然，您也可以通過(guò)循環(huán)編譯等方式去一次性爬取多個(gè)網(wǎng)頁(yè)生成多個(gè)PDF文件。
對(duì)應(yīng)像京東首頁(yè)這樣的開(kāi)啟了圖片懶加載的網(wǎng)頁(yè)，爬取到的部分內(nèi)容是loading狀態(tài)的內(nèi)容，對(duì)于有一些反爬蟲(chóng)機(jī)制的網(wǎng)頁(yè)，爬蟲(chóng)也會(huì)出現(xiàn)問(wèn)題，但是絕大多數(shù)網(wǎng)站都是可以的
- const puppeteer = require('puppeteer');
- const url = require('./url');
- (async () => {
- const browser = await puppeteer.launch({ headless: true })
- const page = await browser.newPage()
- //選擇要打開(kāi)的網(wǎng)頁(yè)
- await page.goto(url, { waitUntil: 'networkidle0' })
- //選擇你要輸出的那個(gè)PDF文件路徑，把爬取到的內(nèi)容輸出到PDF中，必須是存在的PDF，可以是空內(nèi)容，如果不是空的內(nèi)容PDF，那么會(huì)覆蓋內(nèi)容
- let pdfFilePath = './index.pdf';
- //根據(jù)你的配置選項(xiàng)，我們這里選擇A4紙的規(guī)格輸出PDF，方便打印
- await page.pdf({
- path: pdfFilePath,
- format: 'A4',
- scale: 1,
- printBackground: true,
- landscape: false,
- displayHeaderFooter: false
- });
- await browser.close()
- })()
文件解構(gòu)設(shè)計(jì)
數(shù)據(jù)在這個(gè)時(shí)代非常珍貴，按照網(wǎng)頁(yè)的設(shè)計(jì)邏輯，選定特定的href的地址，可以先直接獲取對(duì)應(yīng)的資源，也可以通過(guò)再次使用 page.goto方法進(jìn)入，再調(diào)用 page.evaluate() 處理邏輯，或者輸出對(duì)應(yīng)的PDF文件，當(dāng)然也可以一口氣輸出多個(gè)PDF文件~
這里就不做過(guò)多介紹了，畢竟 Node.js 是可以上天的，或許未來(lái)它真的什么都能做。這么優(yōu)質(zhì)簡(jiǎn)短的教程，請(qǐng)收藏
或者轉(zhuǎn)發(fā)給您的朋友，謝謝。
