如何下載網頁全部資源（附源碼）

nodejs扒取html頁面中全部連接資源

前言：

總有些人，想下載一個插件，能直接獲取瀏覽器顯示頁面的全部資源。也就是下載一個其餘人的網站，可是不想一個個複製連接的內容，緣由大體有二： 一、連接多，打卡每一個連接去下載十分繁瑣 二、複製好了，還要從新改html中每一個連接指向的新資源路徑（下載好的路徑）

分析：

一、js在瀏覽器上是不可能實現，本地生成文件的（下載資源），由於瀏覽器沒有這個權限，那麼就須要服務器配合 二、服務器如何知道html瀏覽器中，到底有哪些文件須要下載，服務器自己沒有document對象，那麼就返回來須要瀏覽器配合

結論：

靠瀏覽器獲取全部須要下載的資源，把須要下載的資源經過ajax請求方式，告訴服務器，服務器去實現下載資源

項目文件夾結構

root根目錄
   | static文件夾
        | file 文件夾（這個能夠不建立，下載資源會生成這個文件夾）
        | jquery-1.8.3.js
   | app.js
複製代碼

代碼展現

一、app.js（先執行這個js，cmd命令窗口輸入： node app.js）

var express = require('express');
var fs = require('fs');
var bodyParser = require('body-parser');
var request = require('request ');
var path= require('path');

var app = express();
app.use(bodyParser.json());

app.use('/urlDownLoadFile', (req, res) => {
  var filePaths = req.body.filepaths,
      dirPath = req.body.dirPath;
  var fileDirPath = path.join(__dirname, './static/', dirPath);
  if (!fs.existsSync(fileDirPath)) {
    fs.mkdirSync(fileDirPath);
  }
  filePaths.forEach(item => {
    if (item !== '') {
      var lastIndex = item.lastIndexOf('/'),
          fileName = item.substr(lastIndex + 1);
      var stream = fs.createWriteStream(path.join(fileDirPath, fileName));
      request(item).pipe(stream).on('close', (err) => {
         if (err) {
          console.log(err);
         }
      });
    }
  });
  res.send('');
});

app.use('/', express.static('./static'));
app.listen(3000);
複製代碼

二、而後，F12打開要下載網頁的控制檯，把下面這段代碼複製進去

var dirPath = 'file/', // 資源目錄（下載到服務器 static/裏面的 哪一個文件夾）
    allUrls = [localhost.href]; // 全部要下載的路徑

var scriptNode = document.createElement('script');
scriptNode.src = 'http://127.0.0.1:3000/jquery-1.8.3.js';
document.body.appendChild(scriptNode);
scriptNode.onload = () => {
  $('link').each((index, ele) => {
    allUrls.push(ele.href);
  });
  $('script').each((index, ele) => {
    allUrls.push(ele.src);
  });
  $('img').each((index, ele) => {
    allUrls.push(ele.src);
  });

  $.ajax({
    url: 'http://127.0.0.1:3000/urlDownLoadFile',
    dataType: 'jsonP',
    data: {
       filepaths: allUrls,
       dirPath: dirPath 
    }
  });
}
複製代碼

三、打開「file 文件夾」，裏面已經有了全部網頁的資源：html、js、css、jpg...

root根目錄
   | static文件夾
        | file 文件夾（這個能夠不建立，下載資源會生成這個文件夾）
        | jquery-1.8.3.js
   | app.js
複製代碼

四、打開html修改引用資源路徑

<script src="../jquery-1.8.3.js"></script>
<script>
  $('link').each((index, ele) => {
    var filePath = ele.href,
        lastIndex = filePath.lastIndexOf('/'),
        fileName = filePath.substr(lastIndex + 1);
    ele.href = fileName;
  });
  $('script').each((index, ele) => {
    var filePath = ele.src,
        lastIndex = filePath.lastIndexOf('/'),
        fileName = filePath.substr(lastIndex + 1);
    ele.src= fileName;
  });
  $('img').each((index, ele) => {
    var filePath = ele.src,
        lastIndex = filePath.lastIndexOf('/'),
        fileName = filePath.substr(lastIndex + 1);
    ele.src= fileName;
  });
</script>
複製代碼