如何下载网页所有资源（附源码）

nodejs扒取html页面中所有链接资源

前言：

总有些人，想下载一个插件，能直接获取浏览器显示页面的所有资源。也就是下载一个其他人的网站，但是不想一个个复制链接的内容，原因大致有二： 1、链接多，打卡每个链接去下载十分繁琐 2、复制好了，还要重新改html中每个链接指向的新资源路径（下载好的路径）

分析：

1、js在浏览器上是不可能实现，本地生成文件的（下载资源），因为浏览器没有这个权限，那么就需要服务器配合 2、服务器如何知道html浏览器中，到底有哪些文件需要下载，服务器本身没有document对象，那么就返回来需要浏览器配合

结论：

靠浏览器获取所有需要下载的资源，把需要下载的资源通过ajax请求方式，告诉服务器，服务器去实现下载资源

项目文件夹结构

root根目录
   | static文件夹
        | file 文件夹（这个可以不创建，下载资源会生成这个文件夹）
        | jquery-1.8.3.js
   | app.js
复制代码

代码展示

1、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);
复制代码

2、然后，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 
    }
  });
}
复制代码

3、打开“file 文件夹”，里面已经有了所有网页的资源：html、js、css、jpg...

root根目录
   | static文件夹
        | file 文件夹（这个可以不创建，下载资源会生成这个文件夹）
        | jquery-1.8.3.js
   | app.js
复制代码

4、打开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>
复制代码

转载于:https://juejin.im/post/5c8c61506fb9a049e12b1978