どのようにホームページのすべての資源をダウンロードしますか?
4643 ワード
nodejsはhtmlページの中ですべてのリンクの資源をとります.
前言:
総一部の人は、プラグインをダウンロードしたいです.ブラウザの表示ページのすべてのリソースを直接取得できます.つまり、他の人のサイトをダウンロードしたいですが、リンクの内容を1つずつコピーしたくないです.理由は大体2つあります.
分析:
1、jsはブラウザでは実現不可能で、ローカルにファイルを生成する(ダウンロードリソース)ブラウザにはこの権限がないので、サーバとの連携が必要です.2、サーバはどうやって分かりますか?
結論:
ブラウザですべてのダウンロードが必要なリソースを取得し、ダウンロードが必要なリソースをajax要求方式でサーバに伝え、サーバーはダウンロードリソースを実現します.
プロジェクトフォルダ構造
1、app.js(先にこのjsを実行して、cmdコマンドウィンドウ入力:node ap.js)
前言:
総一部の人は、プラグインをダウンロードしたいです.ブラウザの表示ページのすべてのリソースを直接取得できます.つまり、他の人のサイトをダウンロードしたいですが、リンクの内容を1つずつコピーしたくないです.理由は大体2つあります.
分析:
1、jsはブラウザでは実現不可能で、ローカルにファイルを生成する(ダウンロードリソース)ブラウザにはこの権限がないので、サーバとの連携が必要です.2、サーバはどうやって分かりますか?
結論:
ブラウザですべてのダウンロードが必要なリソースを取得し、ダウンロードが必要なリソースをajax要求方式でサーバに伝え、サーバーはダウンロードリソースを実現します.
プロジェクトフォルダ構造
root
| static
| file ( , )
| jquery-1.8.3.js
| app.js
コードの展示1、app.js(先にこのjsを実行して、cmdコマンドウィンドウ入力:node ap.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、そして、F 12はウェブページをダウンロードするコンソールを開いて、下記のコードをコピーします.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を開いて参照リソースのパスを変更します."../jquery-1.8.3.js"</span>>
$(<span class="hljs-string">'link'</span>).each((index, ele) => {
var filePath = ele.href,
lastIndex = filePath.lastIndexOf(<span class="hljs-string">'/'</span>),
fileName = filePath.substr(lastIndex + 1);
ele.href = fileName;
});
$(<span class="hljs-string">'script'</span>).each((index, ele) => {
var filePath = ele.src,
lastIndex = filePath.lastIndexOf(<span class="hljs-string">'/'</span>),
fileName = filePath.substr(lastIndex + 1);
ele.src= fileName;
});
$(<span class="hljs-string">'img'</span>).each((index, ele) => {
var filePath = ele.src,
lastIndex = filePath.lastIndexOf(<span class="hljs-string">'/'</span>),
fileName = filePath.substr(lastIndex + 1);
ele.src= fileName;
});
転載先:https://juejin.im/post/5c8c61506fb9a049e12b1978