使用Node.js爬取任意網頁資源并輸出高質量PDF文件到本地~

seasonley 發布于2019-08-30 11:12 / 1943人閱讀

摘要：上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁中的所有標簽對應的跳轉網頁中的所有的文字內容，最后放到一個數組中。

本文適合無論是否有爬蟲以及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 的包 ，其實是替我們開啟了另一個瀏覽器，重新去開啟網頁，獲取它們的數據。

上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁

中的所有 標簽對應的跳轉網頁中的所有 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: 本項目設計思想就是一個網頁一個PDF文件，所以每次爬取一個多帶帶頁面后，請把index.pdf拷貝出去，然后繼續更換url地址，繼續爬取，生成新的PDF文件，當然，您也可以通過循環編譯等方式去一次性爬取多個網頁生成多個PDF文件。

對應像京東首頁這樣的開啟了圖片懶加載的網頁，爬取到的部分內容是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() 處理邏輯，或者輸出對應的PDF文件，當然也可以一口氣輸出多個PDF文件~
這里就不做過多介紹了，畢竟 Node.js 是可以上天的，或許未來它真的什么都能做。這么優質簡短的教程，請收藏
或者轉發給您的朋友，謝謝。

GPU云服務器云服務器用java訪問oracle數據庫取得記錄并輸出到界面保存網頁到本地本地資源上傳到云服務器本地資源共享到云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114839.html

使用Node.js爬取任意網頁資源并輸出高質量PDF文件到本地~

摘要：上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁中的所有標簽對應的跳轉網頁中的所有的文字內容，最后放到一個數組中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文適合無論是否有爬蟲以及Node.js基礎的朋友觀看~ 需求：使用Node.js爬取網頁資源，開箱即用的配置將爬取到的...

xiaoxiaozi 2019-08-02 15:18 評論0 收藏0
使用Node.js爬取任意網頁資源并輸出高質量PDF文件到本地~

摘要：上面只爬取了京東首頁的圖片內容，假設我的需求進一步擴大，需要爬取京東首頁中的所有標簽對應的跳轉網頁中的所有的文字內容，最后放到一個數組中。 showImg(https://segmentfault.com/img/bVbtVeV?w=3840&h=2160); 本文適合無論是否有爬蟲以及Node.js基礎的朋友觀看~ 需求：使用Node.js爬取網頁資源，開箱即用的配置將爬取到的...

wangym 2019-08-23 18:07 評論0 收藏0
三分鐘學會如何在函數計算中使用 puppeteer

摘要：函數計算就是這里的膠水。總結函數計算有如下優勢無需采購和管理服務器等基礎設施專注業務邏輯的開發提供日志查詢性能監控報警等功能快速排查故障以事件驅動的方式觸發應用響應用戶請求毫秒級別彈性伸縮，快速實現底層擴容以應對峰值壓力按需付費。摘要：使用 puppeteer 結合函數計算，可以快速的構建彈性的服務完成各種功能，包括：生成網頁截圖或者 PDF、高級爬蟲，可以爬取大量異步渲染內容的網...

zhkai 2019-06-21 16:46 評論0 收藏0
三分鐘學會如何在函數計算中使用 puppeteer

摘要：為函數計算設置環境變量必填上傳到的必填上傳到的必填上傳到的。另外，按照福布斯雜志的統計，在商業和企業數據中心的典型服務器僅提供的平均最大處理能力的輸出。函數計算就是這里的膠水。摘要：使用 puppeteer 結合函數計算，可以快速的構建彈性的服務完成各種功能，包括：生成網頁截圖或者 PDF、高級爬蟲，可以爬取大量異步渲染內容的網頁、模擬鍵盤輸入、表單自動提交、登錄網頁等，實現 U...

silenceboy 2019-06-21 16:46 評論0 收藏0