どのようにホームページのすべての資源をダウンロードしますか?

4643 ワード

nodejsはhtmlページの中ですべてのリンクの資源をとります.
前言:
総一部の人は、プラグインをダウンロードしたいです.ブラウザの表示ページのすべてのリソースを直接取得できます.つまり、他の人のサイトをダウンロードしたいですが、リンクの内容を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