下载网页所有资源

次给大家分享过怎么下载网页视频：

链接地址：http://1t.click/bjAb

那如果网页上正放着一首歌，一个音频，我们想要下载，但发现没有下载按钮，我们应该怎么办呢？

或者比如我在网易云的网站上在线听”画“这首歌，当我点击下载的时候，他提示我需要下载网易云客户端才能继续下载，但我并不想下载网易云，因为我已经下载了酷我，那怎么办呢？

今天就给大家带来教程，让你下载网页上的任意资源，下载网页上的视频，歌曲，音频，图片等统统不在话下。

电脑

chrono插件

首先进入扩展迷的网站：https://www.extfans.com/，

搜索chrono，或者直接在点击左下角的chrono下载管理进行下载

下载需要验证码，需要关注扩展迷的公众号回复插件获取

获取验证码下载之后，解压，然后拖动到chrome浏览器安装即可

如果还有不会下载的，请看之前的文章：

地址链接：http://1t.click/bjAe

下载完成之后，浏览器上面有这个标识就代表成功了

下面给大家讲它如何使用，我举个例子就懂了

比如我在网易云网站上播放“画“这首歌，我想下载，首先需要点击chrono的扩展图标，然后点击图中所示的图标

点击音频，选择一个，点击开始就行了

IDM

idm能嗅探到网页上的资源并下载，插件和软件：

下载地址：http://1t.click/aY36

出现图中所示按钮，点击下载即可，如果没用，刷新或者确保歌曲在播放

安卓

米侠浏览器

上次推文介绍了用法，点击嗅探即可

文章地址：http://1t.click/bjAg

via浏览器

应用商店下载，点击右下角的三条杠

点击工具箱

点击资源嗅探即可

雨见浏览器

之前也给大家介绍过，使用方法和下载地址请看这篇文章良心浏览器推荐，绝对吊打国内浏览器

右滑打开设置，开启超级资源嗅探即可，到时后在网站上会自动下载，里面右关于资源嗅探的介绍

点击雨见下载即可

文章排版质量可能不是很好，但绝对原创，不喜勿喷，喜欢请点赞转发哦！

原文地址有惊喜：http://1t.click/bjAp

明：文章内容仅用于学习交流，切勿不当使用。

上网的时候经常会遇到网页禁止复制文本或者禁止文档下载的情况。今天结合案例分析下实现这些限制的手法和解除办法。

1、文档复制

首先创建一个demo.html的文档，文档内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        body {background-color: aqua;}
    </style>
</head>
<body>
    <div class="content">测试文本测试文本测试文本</div>
    <script>
        let htmlEle=document.documentElement;
        let bodyEle=document.querySelector('body');
        htmlEle.addEventListener('selectstart', (e)=> {
            e.preventDefault();
        });
        bodyEle.addEventListener('copy', (e)=> {
            e.preventDefault();
        });
        bodyEle.addEventListener('selectstart', (e)=> {
            e.preventDefault();
        });
        bodyEle.addEventListener('contextmenu', (e)=> {
            e.preventDefault();
        });
    </script>
</body>
</html>

打开文档可以发现，页面文本是无法选择并复制的。因为如代码所示，页面元素被绑定了几个事件（选择、拷贝、右键菜单），阻止了用户对文本的复制企图。

怎么办呢？

打开浏览器的开发者工具，切换到Elements标签下，选择文本元素，这时可以在下方的“事件监听器”中查看到目标元素及其祖先元素上绑定的事件。展开这些相关的事件，可以看到“移除”按钮，接下来只需点击按钮将这些限制事件移除便可以复制了。

上述办法是在事件绑定后，再将它们移除。此外，也可以通过抓包改包的方式移除绑定事件相关的代码，从源头阻止事件的绑定。这需要抓包工具的辅助，这里用到的是Fiddler。

假设网页部署在本地服务器上，首先，打开Fiddler，在右侧切换到“自动转发”面板（带闪电图标的），勾选图中两个选项；然后添加规则，填上要更改的请求地址以及要替换的本地文件（假设为demo1文件，内容如下），填好后保存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <style>
        body {background-color: #dedede;}
    </style>
</head>
<body>
    <div class="content">测试文本测试文本测试文本</div>
</body>
</html>

设置好以后再次刷新网页，会发现页面的背景色发生了变化，而且文本也可以直接复制了。

2、文档下载

此处以网上的一个文档为例，文档可以在线查看，但是无法直接下载。通过开发者工具选中文档，可以看到它对应了一个img标签（以前是canvas），我们可以将图片保存到本地，但是如果页面比较多，手动操作就很麻烦，所以可以用代码帮我们自动执行，将图片合并成pdf文件并下载到本地。

以下代码可做参考：

function loadScript (url) {
  let ele=document.createElement('script')
  ele.src=url
  document.body.appendChild(ele)
}
function img2dataUrl (options) {
  let result=''
  let img=options.img || ''
  let width=options.width || img.naturalWidth || img.clientWidth
  let height=options.height || img.naturalHeight || img.clientHeight
  let quality=options.quality || 100
  let mimeType=options.mimeType || 'image/png'
  let canvas=document.createElement('canvas')
  canvas.width=width
  canvas.height=height
  let ctx=canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height)
  result=canvas.toDataURL(mimeType, quality / 100)
  return result
}

loadScript('https://cdn.bootcdn.net/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js')

function img2pdf () {
  let imgArr=[...document.querySelectorAll('.reader_inner img')]
  if (imgArr.length===0) return
  let doc=new jspdf.jsPDF({unit:'px'});
  imgArr.forEach((v,i)=> {
    v.setAttribute("crossOrigin",'anonymous');
    let pxPermm=v.width / 210 / 2.2;
    let imgData=img2dataUrl({img:v}).slice('data:image/png;base64,'.length);
    (i > 0) && doc.addPage();
    doc.addImage(imgData, 'png', 0, 0, v.width / pxPermm, v.height / pxPermm);
  })
  doc.save('img2pdf.pdf');
}

将代码放到控制台或者代码段中执行，执行后，再在控制台调用 img2pdf() 方法即可将可浏览的页面合并成PDF下载到本地。

一个好的编辑器我们可以方便的开发项目，编写代码，配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。

基于html项目的开发和代码编写现在网上有很多编辑器，也有免费的，也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本，我们可以使用记事本编辑html代码。

使用记事本编写html的步骤是首先新建一个文本文档，按照html的语法规则编写相关的代码和保存文件，然后把文件的后缀名改为.html，使用电脑上的浏览器打开就可以查看我们代码的运行结果。

虽然记事本也能编写html代码，但是效率不高也不方便，所以我们使用专业的编辑器来开发项目，编写代码和管理项目。

常用html代码编写的免费软件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官网下载地址：

https://www.dcloud.io/hbuilderx.html

vs code的官网下载地址：

https://code.visualstudio.com/

Sublime Text官网下载地址：

http://www.sublimetext.com/

我们以后的教程都使用HBuilderX，所以下面为了同学们的学习方便，对HBuilderX的下载和安装做详细的教程。

一，下载

首先访问HBuilderX的官网网址：

https://www.dcloud.io/hbuilderx.html

打开上面的HBuilderX下载网址后点击页面上download，在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。

在Windows10环境下下载后的文件是一个压缩的.zip文件。

二，安装

鼠标右击下载下来的压缩文件进行解压。

解压完成后是一个名为HBuilderX的文件夹。

解压完成后鼠标双击HBuilderX文件夹：

双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器：

因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序，我们可以右击HBuilderX.exe文件创建桌面快捷方式。

小百科：

绿色软件指一类小型软件，多数为免费软件，最大特点是软件无需安装便可使用，可存放于闪存中，移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装，下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值，所以相对一般的软件来说，绿色软件对系统的影响几乎没有，所以是很好的一种软件类型。

三，新建项目

HBuilderX编辑器初次启动时的默认界面是下图所示：

按照下图所示可以创建一个新的名为demo1空白项目：

名为demo1的空白项目创建成功后的界面如下图所示：

接下来在刚我们新建的demo1项目下创建名为helloworld的html文件

鼠标右击创建的demo1项目选择新建在选择.html文件：

在弹出的对话框里填入html文件的名称：

编写一段代码：

运行：

在浏览器上观察效果：

好了，到这里html的开发环境搭建和HBuilderX的安装教程结束了。

下面再给大家教一下怎样修改HBuilderX的主题风格，HBuilderX自身提供了修改软件主题的功能，使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。

按照一下步骤可以修改HBuilderX的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：

雅黑主题：

雅蓝主题：

好了本节全部内容全部结束了，希望我准备的内容对你有所帮助

你的支持是我的最大动力，若觉得我的教程还可以对你有帮助为我点赞加关注！谢谢！

在线咨询

上一篇：前端基础：HTML
下一篇：Servlet 自动刷新页面

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

下载网页所有资源

电脑

安卓

1、文档复制

2、文档下载

您的项目需求