如何下载网页所有资源(附源码)

本文介绍如何利用NodeJS批量下载一个网页的所有资源,包括HTML、JS、CSS和图片等。通过浏览器发送AJAX请求将所需资源列表传递给服务器,服务器负责实际的下载过程。这种方法解决了手动复制链接和修改HTML资源路径的繁琐工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值