小編給大家分享一下怎樣使用Node.js爬取任意網(wǎng)頁資源并輸出PDF文件到本地,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)成立十余年來,這條路我們正越走越好,積累了技術與客戶資源,形成了良好的口碑。為客戶提供網(wǎng)站設計、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設計、域名與空間、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。網(wǎng)站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等,這些對于網(wǎng)站建設都非常重要,創(chuàng)新互聯(lián)通過對建站技術性的掌握、對創(chuàng)意設計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案,攜手廣大客戶,共同發(fā)展進步。需求:
使用Node.js爬取網(wǎng)頁資源,開箱即用的配置
將爬取到的網(wǎng)頁內(nèi)容以PDF格式輸出
如果你是一名技術人員,那么可以看我接下來的文章,否則,請直接移步到我的github倉庫,直接看文檔使用即可
倉庫地址:附帶文檔和源碼
本需求使用到的技術:Node.js和puppeteer
puppeteer 官網(wǎng)地址: puppeteer地址
Node.js官網(wǎng)地址:鏈接描述
Puppeteer是谷歌官方出品的一個通過DevTools協(xié)議控制headless Chrome的Node庫??梢酝ㄟ^Puppeteer的提供的api直接控制Chrome模擬大部分用戶操作來進行UI Test或者作為爬蟲訪問頁面來收集數(shù)據(jù)。
環(huán)境和安裝
Puppeteer本身依賴6.4以上的Node,但是為了異步超級好用的async/await,推薦使用7.6版本以上的Node。另外headless Chrome本身對服務器依賴的庫的版本要求比較高,centos服務器依賴偏穩(wěn)定,v6很難使用headless Chrome,提升依賴版本可能出現(xiàn)各種服務器問題(包括且不限于無法使用ssh),最好使用高版本服務器。(建議使用最新版本的Node.js)
小試牛刀,爬取京東資源
const puppeteer = require('puppeteer'); // 引入依賴 (async () => { //使用async函數(shù)完美異步 const browser = await puppeteer.launch(); //打開新的瀏覽器 const page = await browser.newPage(); // 打開新的網(wǎng)頁 await page.goto('https://www.jd.com/'); //前往里面 'url' 的網(wǎng)頁 const result = await page.evaluate(() => { //這個result數(shù)組包含所有的圖片src地址 let arr = []; //這個箭頭函數(shù)內(nèi)部寫處理的邏輯 const imgs = document.querySelectorAll('img'); imgs.forEach(function (item) { arr.push(item.src) }) return arr }); // '此時的result就是得到的爬蟲數(shù)據(jù),可以通過'fs'模塊保存' })()
復制過去 使用命令行命令 ` node 文件名 ` 就可以運行獲取爬蟲數(shù)據(jù)了 這個 puppeteer 的包 ,其實是替我們開啟了另一個瀏覽器,重新去開啟網(wǎng)頁,獲取它們的數(shù)據(jù)。
上面只爬取了京東首頁的圖片內(nèi)容,假設我的需求進一步擴大,需要爬取京東首頁中的所有 標簽對應的跳轉(zhuǎn)網(wǎng)頁中的所有 title的文字內(nèi)容,最后放到一個數(shù)組中。
我們的async函數(shù)上面一共分了五步, 只有 puppeteer.launch() ,browser.newPage(), browser.close() 是固定的寫法。
page.goto 指定我們?nèi)ツ膫€網(wǎng)頁爬取數(shù)據(jù),可以更換內(nèi)部url地址,也可以多次調(diào)用這個方法。
page.evaluate 這個函數(shù),內(nèi)部是處理我們進入想要爬取網(wǎng)頁的數(shù)據(jù)邏輯
page.goto和page.evaluate兩個方法,可以在async內(nèi)部調(diào)用多次,那意味著我們可以先進入京東網(wǎng)頁,處理邏輯后,再次調(diào)用page.goto這個函數(shù)
注意,上面這一切邏輯,都是puppeteer這個包幫我們在看不見的地方開啟了另外一個瀏覽器,然后處理邏輯,所以最終要調(diào)用browser.close()方法關閉那個瀏覽器。
這時候我們對上一篇的代碼進行優(yōu)化,爬取對應的資源。
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(() => { //這個方法內(nèi)部console.log無效 return $('title').text(); //返回每個界面的title文字內(nèi)容 }); arr.push(result) //每次循環(huán)給數(shù)組中添加對應的值 } console.log(arr) //得到對應的數(shù)據(jù) 可以通過Node.js的 fs 模塊保存到本地 await browser.close() })()
上面有天坑 page.evaluate函數(shù)內(nèi)部的console.log不能打印,而且內(nèi)部不能獲取外部的變量,只能return返回,
使用的選擇器必須先去對應界面的控制臺實驗過能不能選擇DOM再使用,比如京東無法使用querySelector。這里由于
京東的分界面都使用了jQuery,所以我們可以用jQuery,總之他們開發(fā)能用的選擇器,我們都可以用,否則就不可以。
接下來我們直接來爬取Node.js的官網(wǎng)首頁然后直接生成PDF
無論您是否了解Node.js和puppeteer的爬蟲的人員都可以操作,請您一定萬分仔細閱讀本文檔并按順序執(zhí)行每一步
本項目實現(xiàn)需求:給我們一個網(wǎng)頁地址,爬取他的網(wǎng)頁內(nèi)容,然后輸出成我們想要的PDF格式文檔,請注意,是高質(zhì)量的PDF文檔
第一步,安裝Node.js ,推薦http://nodejs.cn/download/,Node.js的中文官網(wǎng)下載對應的操作系統(tǒng)包
第二步,在下載安裝完了Node.js后, 啟動windows命令行工具(windows下啟動系統(tǒng)搜索功能,輸入cmd,回車,就出來了)
第三步 需要查看環(huán)境變量是否已經(jīng)自動配置,在命令行工具中輸入 node -v,如果出現(xiàn) v10. ***字段,則說明成功安裝Node.js
第四步 如果您在第三步發(fā)現(xiàn)輸入node -v還是沒有出現(xiàn) 對應的字段,那么請您重啟電腦即可
第五步 打開本項目文件夾,打開命令行工具(windows系統(tǒng)中直接在文件的url地址欄輸入cmd就可以打開了),輸入 npm i cnpm nodemon -g
第六步 下載puppeteer爬蟲包,在完成第五步后,使用cnpm i puppeteer --save 命令 即可下載
第七步 完成第六步下載后,打開本項目的url.js,將您需要爬蟲爬取的網(wǎng)頁地址替換上去(默認是http://nodejs.cn/)
第八步 在命令行中輸入 nodemon index.js 即可爬取對應的內(nèi)容,并且自動輸出到當前文件夾下面的index.pdf文件中
TIPS: 本項目設計思想就是一個網(wǎng)頁一個PDF文件,所以每次爬取一個單獨頁面后,請把index.pdf拷貝出去,然后繼續(xù)更換url地址,繼續(xù)爬取,生成新的PDF文件,當然,您也可以通過循環(huán)編譯等方式去一次性爬取多個網(wǎng)頁生成多個PDF文件。
對應像京東首頁這樣的開啟了圖片懶加載的網(wǎng)頁,爬取到的部分內(nèi)容是loading狀態(tài)的內(nèi)容,對于有一些反爬蟲機制的網(wǎng)頁,爬蟲也會出現(xià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() //選擇要打開的網(wǎng)頁 await page.goto(url, { waitUntil: 'networkidle0' }) //選擇你要輸出的那個PDF文件路徑,把爬取到的內(nèi)容輸出到PDF中,必須是存在的PDF,可以是空內(nèi)容,如果不是空的內(nèi)容PDF,那么會覆蓋內(nèi)容 let pdfFilePath = './index.pdf'; //根據(jù)你的配置選項,我們這里選擇A4紙的規(guī)格輸出PDF,方便打印 await page.pdf({ path: pdfFilePath, format: 'A4', scale: 1, printBackground: true, landscape: false, displayHeaderFooter: false }); await browser.close() })()
文件解構設計
數(shù)據(jù)在這個時代非常珍貴,按照網(wǎng)頁的設計邏輯,選定特定的href的地址,可以先直接獲取對應的資源,也可以通過再次使用 page.goto方法進入,再調(diào)用 page.evaluate() 處理邏輯,或者輸出對應的PDF文件,當然也可以一口氣輸出多個PDF文件~
以上是“怎樣使用Node.js爬取任意網(wǎng)頁資源并輸出PDF文件到本地”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!