本文適合無論是否有爬蟲以及Node.js基礎的朋友觀看~
需求：
- 使用
Node.js爬取網頁資源，開箱即用的配置 - 將爬取到的網頁內容以
PDF格式輸出
如果你是一名技術人員，那麼可以看我接下來的文章，否則，請直接移步到我的github倉庫，直接看文件使用即可
倉庫地址:附帶文件和原始碼,別忘了給個star哦
本需求使用到的技術：Node.js和puppeteer
-
puppeteer官網地址: puppeteer地址 -
Node.js官網地址:連結描述 -
Puppeteer是谷歌官方出品的一個通過DevTools協議控制headless Chrome的Node庫。可以通過Puppeteer的提供的api直接控制Chrome模擬大部分使用者操作來進行UI Test或者作為爬蟲訪問頁面來收集資料。 - 環境和安裝
-
Puppeteer本身依賴6.4以上的Node，但是為了非同步超級好用的async/await，推薦使用7.6版本以上的Node。另外headless Chrome本身對伺服器依賴的庫的版本要求比較高，centos伺服器依賴偏穩定，v6很難使用headless Chrome，提升依賴版本可能出現各種伺服器問題（包括且不限於無法使用ssh），最好使用高版本伺服器。（建議使用最新版本的Node.js）
小試牛刀，爬取京東資源
const puppeteer = require('puppeteer'); // 引入依賴
(async () => { //使用async函式完美非同步
const browser = await puppeteer.launch(); //開啟新的瀏覽器
const page = await browser.newPage(); // 開啟新的網頁
await page.goto('https://www.jd.com/'); //前往裡面 'url' 的網頁
const result = await page.evaluate(() => { //這個result陣列包含所有的圖片src地址
let arr = []; //這個箭頭函式內部寫處理的邏輯
const imgs = document.querySelectorAll('img');
imgs.forEach(function (item) {
arr.push(item.src)
})
return arr
});
// '此時的result就是得到的爬蟲資料，可以通過'fs'模組儲存'
})()
複製過去 使用命令列命令 ` node 檔名 ` 就可以執行獲取爬蟲資料了
這個 puppeteer 的包 ，其實是替我們開啟了另一個瀏覽器，重新去開啟網頁，獲取它們的資料。
- 上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁
中的所有<a> 標籤對應的跳轉網頁中的所有 title的文字內容，最後放到一個陣列中。
- 我們的
async函式上面一共分了五步， 只有puppeteer.launch(),
browser.newPage(), browser.close() 是固定的寫法。
-
page.goto指定我們去哪個網頁爬取資料，可以更換內部url地址，也可以多次
呼叫這個方法。
-
page.evaluate這個函式，內部是處理我們進入想要爬取網頁的資料邏輯
-
page.goto和page.evaluate兩個方法，可以在async內部呼叫多次，
那意味著我們可以先進入京東網頁，處理邏輯後，再次呼叫page.goto這個函式，
注意，上面這一切邏輯，都是puppeteer這個包幫我們在看不見的地方開啟了另外一個
瀏覽器，然後處理邏輯，所以最終要呼叫browser.close()方法關閉那個瀏覽器。
這時候我們對上一篇的程式碼進行優化，爬取對應的資源。
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(() => { //這個方法內部console.log無效
return $('title').text(); //返回每個介面的title文字內容
});
arr.push(result) //每次迴圈給陣列中新增對應的值
}
console.log(arr) //得到對應的資料 可以通過Node.js的 fs 模組儲存到本地
await browser.close()
})()
上面有天坑 page.evaluate函式內部的console.log不能列印，而且內部不能獲取外部的變數,只能return返回，
使用的選擇器必須先去對應介面的控制檯實驗過能不能選擇DOM再使用，比如京東無法使用querySelector。這裡由於
京東的分介面都使用了jQuery，所以我們可以用jQuery，總之他們開發能用的選擇器，我們都可以用，否則就不可以。
接下來我們直接來爬取Node.js的官網首頁然後直接生成PDF
無論您是否瞭解Node.js和puppeteer的爬蟲的人員都可以操作，請您一定萬分仔細閱讀本文件並按順序執行每一步
本專案實現需求：給我們一個網頁地址，爬取他的網頁內容，然後輸出成我們想要的PDF格式文件，請注意，是高質量的PDF文件
- 第一步，安裝
Node.js,推薦http://nodejs.cn/download/，Node.js的中文官網下載對應的作業系統包 - 第二步，在下載安裝完了
Node.js後， 啟動windows命令列工具(windows下啟動系統搜尋功能，輸入cmd，回車，就出來了) - 第三步 需要檢視環境變數是否已經自動配置,在命令列工具中輸入
node -v，如果出現v10. ***欄位，則說明成功安裝Node.js - 第四步 如果您在第三步發現輸入
node -v還是沒有出現 對應的欄位，那麼請您重啟電腦即可 - 第五步 開啟本專案資料夾，開啟命令列工具（windows系統中直接在檔案的
url位址列輸入cmd就可以開啟了），輸入npm i cnpm nodemon -g - 第六步 下載
puppeteer爬蟲包，在完成第五步後，使用cnpm i puppeteer --save命令 即可下載 - 第七步 完成第六步下載後，開啟本專案的
url.js，將您需要爬蟲爬取的網頁地址替換上去(預設是http://nodejs.cn/) - 第八步 在命令列中輸入
nodemon index.js即可爬取對應的內容，並且自動輸出到當前資料夾下面的index.pdf檔案中
TIPS: 本專案設計思想就是一個網頁一個index.pdf拷貝出去，然後繼續更換url地址，繼續爬取，生成新的對應像京東首頁這樣的開啟了圖片懶載入的網頁，爬取到的部分內容是
loading狀態的內容，對於有一些反爬蟲機制的網頁，爬蟲也會出現問題，但是絕大多數網站都是可以的
const puppeteer = require('puppeteer');
const url = require('./url');
(async () => {
const browser = await puppeteer.launch({ headless: true })
const page = await browser.newPage()
//選擇要開啟的網頁
await page.goto(url, { waitUntil: 'networkidle0' })
//選擇你要輸出的那個PDF檔案路徑，把爬取到的內容輸出到PDF中，必須是存在的PDF，可以是空內容，如果不是空的內容PDF，那麼會覆蓋內容
let pdfFilePath = './index.pdf';
//根據你的配置選項，我們這裡選擇A4紙的規格輸出PDF，方便列印
await page.pdf({
path: pdfFilePath,
format: 'A4',
scale: 1,
printBackground: true,
landscape: false,
displayHeaderFooter: false
});
await browser.close()
})()
檔案解構設計
資料在這個時代非常珍貴，按照網頁的設計邏輯，選定特定的href的地址，可以先直接獲取對應的資源，也可以通過再次使用page.goto方法進入，再呼叫page.evaluate()處理邏輯，或者輸出對應的
這裡就不做過多介紹了，畢竟Node.js是可以上天的，或許未來它真的什麼都能做。這麼優質簡短的教程，請收藏
或者轉發給您的朋友，謝謝。