抓取网页生成电子书(nodejs扒取html页面中所有链接资源(下载好的路径) )
优采云 发布时间: 2022-01-15 02:08抓取网页生成电子书(nodejs扒取html页面中所有链接资源(下载好的路径)
)
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、打开“文件夹”，里面已经有了网页的所有资源：html、js、css、jpg……
root根目录
| static文件夹
| file 文件夹（这个可以不创建，下载资源会生成这个文件夹）
| jquery-1.8.3.js
| app.js
复制代码
4、打开html修改引用资源路径
$('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;
});
复制代码
