下載網頁所有資源

次給大家分享過怎么下載網頁視頻：

鏈接地址：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、文檔下載

您的項目需求