一朋友在群裡問有沒有什麼辦法能夠一次性把這個連結 裡的文章儲存下來。點開可以看到，其實就是一個文章合集。所以需求就是，把這個文件中的連結裡的文章挨個儲存下來。儲存形式可以有很多種，可以是圖片，也可以是網頁。這裡因為使用 puppeteer 庫的原因，故選擇儲存格式格式為PDF。

需求解構

完成整個動作，主要分為這兩個部分。獲取文件內所有文章的連結；把每個連結裡的內容儲存為PDF檔案。

對於獲取連結，有兩條路，一是使用request模組請求該網址獲取文件；二是把網頁儲存到本地使用fs模組獲取文件內容。拿到文件也就是整個HTML文件後，一開始沒想到什麼好法子來拿到全部文章連結。如果直接在網頁那就好辦，直接DOM的 quertSelectorAll

對於儲存網頁內容，我所知道的常規操作是儲存為PDF檔案，恰巧之前剛知道的 puppeteer 滿足這樣的需求。 puppeteer 是一個由 chrome devtools 團隊維護的提供了控制chrome瀏覽器高階API的一個Node庫。除去爬取網頁內容儲存為PDF檔案外，它還可以作為服務端渲染的一個方案以及實現自動化測試的一個方案。

需求實現

獲取連結

先上這部分程式碼

const getHref = function () {
 let file = fs.readFileSync('./index.html').toString()
 const $ = cheerio.load(file)
 let hrefs = $('#sam').find('a')
 for (e in hrefs) {
  if (hrefs[e].attribs && hrefs[e].attribs['href']) {
   hrefArr.push({
    index: e,href: hrefs[e].attribs['href']
   })
  }
 }
 fs.writeFileSync('hrefJson.json',JSON.stringify(hrefArr))
}

因為後面的程式碼都依賴到讀取的檔案，所以這裡用的是readFileSync方法。如果沒有宣告返回內容的格式，那預設是Buffer格式。可以選擇填寫 utf8 格式，或者直接在該方法後面使用 toString 方法。

兩行程式碼用cheerio拿到所有所有連結的DOM元素後，挨個將其處理為方便後面要用到的格式。考慮到可能存在a標籤沒有href屬性的情況，這裡還對其進行了判斷，不過這也是後面除錯程式時才發現的bug。

如果需要將所有的連結另外儲存起來，使用 writeFile 方法。

存為PDF

同樣，先上這部分程式碼。

const saveToPdf = function () {
 async () => {
  const browser = await puppeteer.launch({
   executablePath: './chrome-win/chrome.exe',});

  // 連結計數
  let i = 0

  async function getPage() {
   const page = await browser.newPage();
   await page.goto(hrefArr[i]['href'],{ waitUntil: 'domcontentloaded' });

   // 網頁標題
   let pageTitle

   if (hrefArr[i]['href'].includes('weixin')) {
    pageTitle = await page.$eval('meta[property="og:title"]',el => el.content)
   } else {
    pageTitle = await page.$eval('title',el => el.innerHTML)
   }

   let title = pageTitle.trim()
   // 去掉斜杆
   let titlea = title.replace(/\s*/g,"")
   // 去掉豎線
   let titleb = titlea.replace(/\|/g,"");
   
   await page.pdf({ path: `${i}${titleb}.pdf` });

   i++

   if (i < hrefArr.length) {
    getPage()
   } else {
    await browser.close();
   }
  }
  getPage()
 }
}

因為需要等待chrome瀏覽器的開啟，以及其他可能的非同步請求。最外層使用了async 配合箭頭函式將真正的執行程式碼包住。

在用 npm 安裝 puppetter 時，因為預設會下載chrome瀏覽器，而伺服器在國外，一般都無法下載成功。當然也有相應的解決方案，這裡我就不展開了。如果安裝 puppeteer ，可以參開 這篇文章 或者直接谷歌搜下。

在前一部分說到，我們需要把不止一個連結裡的內容儲存為PDF，所以使用了變數 i 來標識每一次需要訪問的連結。

對於獲取網頁標題，當時確實費了點時間才處理好拿到已有連結的網頁標題。所以連結中主要有兩種網站的連結，一類是微信公眾號文章，另一類是新浪財新這種網站。微信文章裡頭沒有像新浪這樣直接給出 title 內容。

這個時候就要用到 page 類中的 $eval 方法， $eval 方法主要有兩個引數，一是選擇器，二是在瀏覽器上下文中執行的函式。$eval方法會頁面中執行document.querySelector方法，並將其返回值傳遞給第二個引數，也就是我們寫好的方法中。以獲取新浪網頁文章title為例， title 為傳入選擇器，我們需要的是其標籤內容。

pageTitle = await page.$eval('title',el => el.innerHTML)

在產生檔名的過程中，由於資料夾還是檔案路徑的一部分。此時還需要考慮到windows檔案路徑規範。但網頁中的標題並不受此規範限制，由此產生矛盾。這個問題也是後面除錯的時候才發現，一開始寫程式碼並沒有想到這個問題。即需要去除標題中的斜槓豎杆還有空格等字元。

每獲取完一個連結的內容後，就將連結位置標識 i + 1，知道所有連結內容儲存完畢，關閉開啟的網頁。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。