這篇文章主要講解了“如何使用Node.js爬取任意網(wǎng)頁資源并輸出高質(zhì)量PDF文件到本地”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用Node.js爬取任意網(wǎng)頁資源并輸出高質(zhì)量PDF文件到本地”吧！

10年的克拉瑪依區(qū)網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整克拉瑪依區(qū)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“克拉瑪依區(qū)網(wǎng)站設(shè)計”,“克拉瑪依區(qū)網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

需求：

• 使用Node.js爬取網(wǎng)頁資源，開箱即用的配置

• 將爬取到的網(wǎng)頁內(nèi)容以PDF格式輸出

如果你是一名技術(shù)人員，那么可以看我接下來的文章，否則，請直接移步到我的github倉庫，直接看文檔使用即可

倉庫地址:附帶文檔和源碼,別忘了給個star哦

本需求使用到的技術(shù)：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本身對服務(wù)器依賴的庫的版本要求比較高，centos服務(wù)器依賴偏穩(wěn)定，v6很難使用headless Chrome，提升依賴版本可能出現(xiàn)各種服務(wù)器問題（包括且不限于無法使用ssh），***使用高版本服務(wù)器。（建議使用***版本的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'模塊保存'  })()    復(fù)制過去 使用命令行命令 ` node 文件名 ` 就可以運行獲取爬蟲數(shù)據(jù)了   這個 puppeteer 的包 ，其實是替我們開啟了另一個瀏覽器，重新去開啟網(wǎng)頁，獲取它們的數(shù)據(jù)。

• 上面只爬取了京東首頁的圖片內(nèi)容，假設(shè)我的需求進一步擴大，需要爬取京東首頁

中的所有 標(biāo)簽對應(yīng)的跳轉(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()方法關(guān)閉那個瀏覽器。

這時候我們對上一篇的代碼進行優(yōu)化，爬取對應(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(() => { //這個方法內(nèi)部console.log無效                        return  $('title').text();  //返回每個界面的title文字內(nèi)容          });          arr.push(result)  //每次循環(huán)給數(shù)組中添加對應(yīng)的值      }      console.log(arr)  //得到對應(yīng)的數(shù)據(jù)  可以通過Node.js的 fs 模塊保存到本地      await browser.close()  })()

上面有天坑 page.evaluate函數(shù)內(nèi)部的console.log不能打印，而且內(nèi)部不能獲取外部的變量,只能return返回，

使用的選擇器必須先去對應(yīng)界面的控制臺實驗過能不能選擇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)下載對應(yī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) 對應(yīng)的字段，那么請您重啟電腦即可

• 第五步 打開本項目文件夾，打開命令行工具（windows系統(tǒng)中直接在文件的url地址欄輸入cmd就可以打開了），輸入 npm i cnpm nodemon -g

• 第六步 下載puppeteer爬蟲包，在完成第五步后，使用cnpm i puppeteer --save 命令 即可下載

• 第七步 完成第六步下載后，打開本項目的url.js，將您需要爬蟲爬取的網(wǎng)頁地址替換上去(默認(rèn)是http://nodejs.cn/)

• 第八步 在命令行中輸入 nodemon index.js 即可爬取對應(yīng)的內(nèi)容，并且自動輸出到當(dāng)前文件夾下面的index.pdf文件中

TIPS: 本項目設(shè)計思想就是一個網(wǎng)頁一個PDF文件，所以每次爬取一個單獨頁面后，請把index.pdf拷貝出去，然后繼續(xù)更換url地址，繼續(xù)爬取，生成新的PDF文件，當(dāng)然，您也可以通過循環(huán)編譯等方式去一次性爬取多個網(wǎng)頁生成多個PDF文件。

對應(yīng)像京東首頁這樣的開啟了圖片懶加載的網(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()  })()

文件解構(gòu)設(shè)計

數(shù)據(jù)在這個時代非常珍貴，按照網(wǎng)頁的設(shè)計邏輯，選定特定的href的地址，可以先直接獲取對應(yīng)的資源，也可以通過再次使用 page.goto方法進入，再調(diào)用 page.evaluate() 處理邏輯，或者輸出對應(yīng)的PDF文件，當(dāng)然也可以一口氣輸出多個PDF文件~

感謝各位的閱讀，以上就是“如何使用Node.js爬取任意網(wǎng)頁資源并輸出高質(zhì)量PDF文件到本地”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用Node.js爬取任意網(wǎng)頁資源并輸出高質(zhì)量PDF文件到本地這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！