下載網(wǎng)頁所有資源

次給大家分享過怎么下載網(wǎng)頁視頻：

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

那如果網(wǎng)頁上正放著一首歌，一個(gè)音頻，我們想要下載，但發(fā)現(xiàn)沒有下載按鈕，我們應(yīng)該怎么辦呢？

或者比如我在網(wǎng)易云的網(wǎng)站上在線聽”畫“這首歌，當(dāng)我點(diǎn)擊下載的時(shí)候，他提示我需要下載網(wǎng)易云客戶端才能繼續(xù)下載，但我并不想下載網(wǎng)易云，因?yàn)槲乙呀?jīng)下載了酷我，那怎么辦呢？

今天就給大家?guī)斫坛蹋屇阆螺d網(wǎng)頁上的任意資源，下載網(wǎng)頁上的視頻，歌曲，音頻，圖片等統(tǒng)統(tǒng)不在話下。

電腦

chrono插件

首先進(jìn)入擴(kuò)展迷的網(wǎng)站：https://www.extfans.com/，

搜索chrono，或者直接在點(diǎn)擊左下角的chrono下載管理進(jìn)行下載

下載需要驗(yàn)證碼，需要關(guān)注擴(kuò)展迷的公眾號(hào)回復(fù)插件獲取

獲取驗(yàn)證碼下載之后，解壓，然后拖動(dòng)到chrome瀏覽器安裝即可

如果還有不會(huì)下載的，請(qǐng)看之前的文章：

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

下載完成之后，瀏覽器上面有這個(gè)標(biāo)識(shí)就代表成功了

下面給大家講它如何使用，我舉個(gè)例子就懂了

比如我在網(wǎng)易云網(wǎng)站上播放“畫“這首歌，我想下載，首先需要點(diǎn)擊chrono的擴(kuò)展圖標(biāo)，然后點(diǎn)擊圖中所示的圖標(biāo)

點(diǎn)擊音頻，選擇一個(gè)，點(diǎn)擊開始就行了

IDM

idm能嗅探到網(wǎng)頁上的資源并下載，插件和軟件：

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

出現(xiàn)圖中所示按鈕，點(diǎn)擊下載即可，如果沒用，刷新或者確保歌曲在播放

安卓

米俠瀏覽器

上次推文介紹了用法，點(diǎn)擊嗅探即可

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

via瀏覽器

應(yīng)用商店下載，點(diǎn)擊右下角的三條杠

點(diǎn)擊工具箱

點(diǎn)擊資源嗅探即可

雨見瀏覽器

之前也給大家介紹過，使用方法和下載地址請(qǐng)看這篇文章良心瀏覽器推薦，絕對(duì)吊打國內(nèi)瀏覽器

右滑打開設(shè)置，開啟超級(jí)資源嗅探即可，到時(shí)后在網(wǎng)站上會(huì)自動(dòng)下載，里面右關(guān)于資源嗅探的介紹

點(diǎn)擊雨見下載即可

文章排版質(zhì)量可能不是很好，但絕對(duì)原創(chuàng)，不喜勿噴，喜歡請(qǐng)點(diǎn)贊轉(zhuǎn)發(fā)哦！

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

明：文章內(nèi)容僅用于學(xué)習(xí)交流，切勿不當(dāng)使用。

上網(wǎng)的時(shí)候經(jīng)常會(huì)遇到網(wǎng)頁禁止復(fù)制文本或者禁止文檔下載的情況。今天結(jié)合案例分析下實(shí)現(xiàn)這些限制的手法和解除辦法。

1、文檔復(fù)制

首先創(chuàng)建一個(gè)demo.html的文檔，文檔內(nèi)容如下：

<!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>

打開文檔可以發(fā)現(xiàn)，頁面文本是無法選擇并復(fù)制的。因?yàn)槿绱a所示，頁面元素被綁定了幾個(gè)事件（選擇、拷貝、右鍵菜單），阻止了用戶對(duì)文本的復(fù)制企圖。

怎么辦呢？

打開瀏覽器的開發(fā)者工具，切換到Elements標(biāo)簽下，選擇文本元素，這時(shí)可以在下方的“事件監(jiān)聽器”中查看到目標(biāo)元素及其祖先元素上綁定的事件。展開這些相關(guān)的事件，可以看到“移除”按鈕，接下來只需點(diǎn)擊按鈕將這些限制事件移除便可以復(fù)制了。

上述辦法是在事件綁定后，再將它們移除。此外，也可以通過抓包改包的方式移除綁定事件相關(guān)的代碼，從源頭阻止事件的綁定。這需要抓包工具的輔助，這里用到的是Fiddler。

假設(shè)網(wǎng)頁部署在本地服務(wù)器上，首先，打開Fiddler，在右側(cè)切換到“自動(dòng)轉(zhuǎn)發(fā)”面板（帶閃電圖標(biāo)的），勾選圖中兩個(gè)選項(xiàng)；然后添加規(guī)則，填上要更改的請(qǐng)求地址以及要替換的本地文件（假設(shè)為demo1文件，內(nèi)容如下），填好后保存。

<!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>

設(shè)置好以后再次刷新網(wǎng)頁，會(huì)發(fā)現(xiàn)頁面的背景色發(fā)生了變化，而且文本也可以直接復(fù)制了。

2、文檔下載

此處以網(wǎng)上的一個(gè)文檔為例，文檔可以在線查看，但是無法直接下載。通過開發(fā)者工具選中文檔，可以看到它對(duì)應(yīng)了一個(gè)img標(biāo)簽（以前是canvas），我們可以將圖片保存到本地，但是如果頁面比較多，手動(dòng)操作就很麻煩，所以可以用代碼幫我們自動(dòng)執(zhí)行，將圖片合并成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');
}

將代碼放到控制臺(tái)或者代碼段中執(zhí)行，執(zhí)行后，再在控制臺(tái)調(diào)用 img2pdf() 方法即可將可瀏覽的頁面合并成PDF下載到本地。

一個(gè)好的編輯器我們可以方便的開發(fā)項(xiàng)目，編寫代碼，配置和管理我們的項(xiàng)目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。

基于html項(xiàng)目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費(fèi)的，也有收費(fèi)的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個(gè)文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運(yùn)行結(jié)果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項(xiàng)目，編寫代碼和管理項(xiàng)目。

常用html代碼編寫的免費(fèi)軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網(wǎng)下載地址：

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

vs code的官網(wǎng)下載地址：

https://code.visualstudio.com/

Sublime Text官網(wǎng)下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學(xué)們的學(xué)習(xí)方便，對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。

一，下載

首先訪問HBuilderX的官網(wǎng)網(wǎng)址：

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

打開上面的HBuilderX下載網(wǎng)址后點(diǎn)擊頁面上download，在彈出的對(duì)話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環(huán)境下下載后的文件是一個(gè)壓縮的.zip文件。

二，安裝

鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。

解壓完成后是一個(gè)名為HBuilderX的文件夾。

解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：

雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器：

因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數(shù)為免費(fèi)軟件，最大特點(diǎn)是軟件無需安裝便可使用，可存放于閃存中，移除后也不會(huì)將任何記錄留在本機(jī)計(jì)算機(jī)上。通俗點(diǎn)講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會(huì)在注冊(cè)表中留下注冊(cè)表鍵值，所以相對(duì)一般的軟件來說，綠色軟件對(duì)系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項(xiàng)目

HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示：

按照下圖所示可以創(chuàng)建一個(gè)新的名為demo1空白項(xiàng)目：

名為demo1的空白項(xiàng)目創(chuàng)建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項(xiàng)目下創(chuàng)建名為helloworld的html文件

鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件：

在彈出的對(duì)話框里填入html文件的名稱：

編寫一段代碼：

運(yùn)行：

在瀏覽器上觀察效果：

好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。

下面再給大家教一下怎樣修改HBuilderX的主題風(fēng)格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風(fēng)格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。

按照一下步驟可以修改HBuilderX的主題，默認(rèn)主題是綠柔，我們可以改成雅黑，雅藍(lán)或者自定義主題：

雅黑主題：

雅藍(lán)主題：

好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助

你的支持是我的最大動(dòng)力，若覺得我的教程還可以對(duì)你有幫助為我點(diǎn)贊加關(guān)注！謝謝！

在線咨詢

上一篇：前端基礎(chǔ)：HTML
下一篇：Servlet 自動(dòng)刷新頁面

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

下載網(wǎng)頁所有資源

電腦

安卓

1、文檔復(fù)制

2、文檔下載

您的項(xiàng)目需求