如何下载完整html网页代码源码模板
作者:80网站模板发布时间:2021-02-22浏览量:68
精选企业建站模板,pb建站教程以及各类手机网站模板下载和企业网站模板分享,PbootCMS模板下载提供优质网站模板源码,仿站业务PbootCMS个人博客模板,PbootCMS企业建站,PbootCMS导航模板等
如何下载完整html网页代码模板前言:

对于网站的制作和网站源码的下载,或者说复制网站源码,总有些人,想下载一个插件,能直接获取完整html网页代码浏览器显示页面的所有资源。也就是下载一个其他人的网站,但是不想一个个复制链接的内容,原因大致有二: 1、链接多,打卡每个链接去下载十分繁琐 2、复制好了,还要重新改html中每个链接指向的新资源路径(下载好的路径)

分析:

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

结论:

如何下载完整html网页代码源码模板,靠浏览器获取所有需要下载的资源,把需要下载完整html网页代码的资源通过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修改引用资源路径(完整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>复制代码
文章标签:网站模板下载    html    网页代码    网站源码   
关 键  词:网站模板下载,完整html网页代码, HTML5网站源码下载,html制作网页案例代码
本文网址:http://www.80oo.cn/jishu/83.html如有转载请注明来源!
最新模板
(自适应手机版)净水设备类pbootcms网站模板

编号:x084     价格:50
(自适应手机版)站长导航类网站pb网站模板下载

编号:x085     价格:100
(手机版)蓝色通用企业wap手机网站源码

编号:x083     价格:50
建站知识
2021
09-27
织梦cms要花钱授权了,如何转到别的建站程序?其实现在免费的cms有很多,比如易优cms、mipcms、pbootcms等,我们今天介绍一下为了方便把织梦模板转换成PB模板而生的工具,大大方便的操作过程,不过对于复杂的模板效果不太好。工具是死的,人是活的,工具+手动调整=高效解决,工具作者:晨星傲月。具体工具使用在下载包里已经
2021
08-20
现在的论坛有很多,但是找出几个权重比较高的论坛确实很费事,所以说大家要抽空点时间去选择一些高权重的论坛,SEO马龙认为注册个账号,要把自己的个人信息填写好,不要盲目的去发广告,很容易被论坛的BT斑竹给你K掉的,如何做好网站优化内外链建设?从目前来看外链的选择主要有以下几点:1、bbs类:千万别为了一个广告而浪
2021
06-01
网站语言需要配合一定的规则,大家在使用网站模板的时候,都需要提前知道网站的语言是什么,有助于使用这套模板,大家在看到别人网站的时候,不知道别人的网站是什么语言开发的,也想要做同样的网站的时候,教大家怎样看网站用什么语言开发的1. 根据 meta 信息判断不少的网站会在 meta 添加框架的信息,比如 Joomla、XOOPS、
2021
06-01
很多站长在建站的时候喜欢在底部加入网站运行时间统计,显得逼格特别上档次,今天技术小编就分享下,一个购买网站模板的用户,寻求这样一个代码加上运行时间代码。查看了网站底部模板代码插入的网上很多教程,貌似都只能精确到天,今天我们麦模板技术小编分享的代码是运行时间精确到年月日时分秒。网站底部模板运行时间代码
服务热线