把HTML網頁下載為單文件，可離線訪問

網頁下載下來使用，在日常工作中使用頻率還是很高的，有時候確實能解一時之急，我自己就有很窘迫的經歷。

我開會的時候，都會把準備好的文檔存在局域網，到會議室直接打開就能直接用了。有一次到分公司，由于分公司剛剛成立，內網還沒有和母公司連通。結果這下子懵逼了，上不去內網，看不到文檔。又是叫同事發過來，又是提發送文件的安全申請，讓人著急。

如果把網站保存下來，放在自己的電腦中，既不用擔心信息泄露問題，又不用為了看不了文檔而著急。

遇到問題，記錄下來，然后解決問題，程序員的解決思路永遠是自己創造輪子的，接下來就是不斷的探索解決方案。

其實下載網頁的方式有很多種，其中有幾種辦法使用的比較多，例如：如果你用Chrome，直接按 Ctrl+s 就可實現。使用這種方法，Chrome會把整個網站，按照編譯完成的源碼目錄結構保存下來。像下面這樣：

下載完成的文件直接點擊 xxx.html 可以直接離線訪問，但是這種方式對目錄的依賴結構比較高，怎么理解呢？就是 html 文件和對應文件名的文件夾必須在同一個目錄中，才能正常使用?？截惖狡渌麢C器的時候必須要兩個同時拷貝才可以，否則就會排版錯亂。

如果有十個或者更多的網頁需要拷貝或者刪除，就會很麻煩，例如我想在其中找到其中幾個，復制到其他地方，很容易弄錯順序。

HTML 是一種純文本格式，它用于排版文字。純文本文檔的意思就是，文檔中只包含文字內容，不包含二進制內容，舉個例子：打印出的A4紙，只有文字沒有圖片。而 HTML 想要顯示照片等二進制信息，通常都會鏈接到其他文件，也就是上面文件夾里面的內容。

不過 Chrome 下載文件這種方式也有優點，下載下來的文件可以保持獨立性，比如說，我需要這個網頁中的一張圖片，那么就可以直接到文件夾里面尋找了。

另外還有一種辦法，也有很多人再使用。Chrome 在打印網頁的時候，會把網頁轉成 PDF ，然后在進行打印。那么就給我們提供了很明確的思路，把網頁直接保存為 PDF ，這樣保存下來的網頁就只有一個文件。

使用Chrome，直接按下Ctrl+p就可以。然后目標打印機選擇另存為 PDF 。

這個功能很多瀏覽器都支持

但是這種辦法也有很明顯的缺點，由于 PDF 是靜態文檔，網頁上的一些動畫可能不會正常顯示，而且排版也有可能會錯亂，這完全靠運氣。個人覺得這不是一種很靠譜的方法。

這時候主角來了！有一個工具既可以把網頁保存為 html 又可以保持是單文件。他就是 monolith ，你可以在 github 上面找到它，但是源碼并沒有編譯為可執行文件，我把它編譯了一下，下面會放上來鏈接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就簡單說說使用方法：如果你下載我的鏈接，那么里面有三個文件：

第一個是Mac平臺編譯出來的，使用方式為：

./monolith 網站地址 > xxx.html

默認情況下 monolith 會把生成的 html 輸出到標準輸出流，也就是當前終端。使用 > 我們把輸出的內容重定向并覆蓋到文件。

執行完成之后，在這個目錄下面就會有一個對應的文件：xxx.html 。

另外兩個是 Windows 平臺使用的。為了簡化使用，我寫了一個 CMD 腳本。直接點擊 monolith.cmd ，然后粘貼地址就可以完成下載。

下載完成之后，在本地你會發現只有一個 html 文件。我們打開之后，發現圖片和JS等信息都在，而且排版正常。那么就要思考了，我們之前說過，HTML 是放置純文本信息的，那么圖片在哪里呢？

答案顯而易見，就在 HTML 文件里面。為了方便小圖片傳輸，有一種叫 Base64 的東西，它可以把二進制信息變成成純文本。這在使用 Json 傳遞數據的今天十分常見，它可以減少一次請求（題外話），這里就是用的這個原理。monolith 把圖片等二進制內容轉為了純文本，保存在 HTML 文件中。我們在下載的文件源碼可以看到：

對比源代碼，src 信息已經變成了 base64 格式的圖片，就是那串亂碼。復制那串亂碼，從網上搜一個 base64 轉圖片工具，粘貼進去，這時會發現就是我們看到的那張圖片。這樣一來，無論這個網站上有多少個文件，都會保存到一個 HTML 文件里面，而且還能離線使用。

當然，base64 編碼的圖片比原生圖片略大，這可能也是你現在在擔心的問題。不過 monolith 會特殊處理文件體積。我們可以看看 Chrome 直接下載和使用 monolith 下載體積相差多少。我們把兩種方式下載的網頁都進行了 7-Zip 壓縮。

我們可以看到，使用 monolith 下載會比 Chrome 直接下載小一倍還多！

最后要說的是局限性，無論那種方法，都幾乎不能把視頻網站中的視頻下載下來。因為現在的視頻地址都是 Token 加密的，同理，使用 Token 加密的其他請求信息也無法下載。

比如你可以試試下載其他網站的首頁，Logo 和視頻都是下載不了的。但是也有解決辦法，那就是另外一個領域的事情了，以后有機會說給大家聽。

如果這篇文章對您或者您的朋友有幫助，感謝您關注，轉發。

兩天有個客戶需要把網頁轉為pdf，之前也沒開發過類似的工具，就在百度搜索了一波，主要有下面三種

在線轉pdf
使用瀏覽器打印功能轉pdf
使用本地軟件工具轉pdf

在線轉pdf

在百度（我一般用必應）搜索“在線網頁轉pdf”就有很多可以做這個事的網站，免費的如

PDF24Tools

各種pdf的操作都有，免費使用，速度一般。

官網地址https://tools.pdf24.org/zh

PDF24 Tools

doctron

開源免費項目，使用golang寫的，提供在線轉

官網地址http://doctron.lampnick.com/

doctron在線體驗demo

還有挺多其他的，可以自己搜索，但是都不符合我的預期。

使用瀏覽器打印功能轉pdf

在瀏覽器右鍵，點擊打印或者ctrl+p
在彈出的打印對話框中找到目標打印機選擇“另存為PDF”
點擊“保存”按鈕即可下載pdf了

使用本地軟件工具轉pdf

Doctron，這是我今天要介紹的重頭戲。

Doctron是基于Docker、無狀態、簡單、快速、高質量的文檔轉換服務。目前支持將html轉為pdf、圖片(使用chrome(Chromium)瀏覽器內核，保證轉換質量)。支持PDF添加水印。

使用chrome內核保證高質量將HTML轉為pdf/圖片。
簡易部署(提供docker鏡像,Dockerfile以及k8s yaml配置文件)。支持豐富的轉換參數。轉為pdf和圖片支持自定義大小。
無狀態服務支持。

管他的，先把代碼下載下來再說

git clone https://gitcode.net/mirrors/lampnick/doctron.git

倉庫

運行

go build
./doctron --config conf/default.yaml

運行截圖

轉pdf，訪問http://127.0.0.1:8080/convert/html2pdf?u=doctron&p=lampnick&url=<url>，更換鏈接中的url為你需要轉換的url即可。

轉換效果

然后就可以寫程序去批量轉換需要的網頁了，但是我需要轉換的網頁有兩個需求

1、網站需要會員登錄，不然只能看得到一部分

2、需要把網站的頭和尾去掉的

這就為難我了，不會go語言啊，硬著頭皮搞了，肯定有個地方打開這個url的，就去代碼慢慢找，慢慢調試，功夫不負有心人，終于找到調用的地方了。

第一步：添加網站用戶登錄cookie

添加cookie之前

添加cookie之后

第二步：去掉網站頭尾

chromedp.Evaluate(`$('.header').css("display" , "none");
		$('.btn-group').css("display" , "none");
		$('.container .container:first').css("display" , "none");
		$('.breadcrumb').css("display" , "none");
		$('.footer').css("display" , "none")`, &ins.buf),

打開網頁后執行js代碼把頭尾隱藏掉

第三步：程序化，批量自動生成pdf

public static void createPDF(String folder , String cl ,  String pdfFile, String urlhref) {
        try {
            String fileName = pdfFile.replace("/", ":");
            String filePath = folder + fileName;
            File srcFile = new File(filePath);
            File newFolder = new File("/Volumes/disk2/myproject" + File.separator + cl);
            File destFile = new File(newFolder, fileName);
            if(destFile.exists()){
                return;
            }
            if(srcFile.exists()){
                //移動到對應目錄
                if(!newFolder.exists()){
                    newFolder.mkdirs();
                }
                FileUtils.moveFile(srcFile , destFile);
                return;
            }
            if(!newFolder.exists()){
                newFolder.mkdirs();
            }
            String url = "http://127.0.0.1:8888/convert/html2pdf?u=doctron&p=lampnick&url="+urlhref;
            HttpEntity<String> entity = new HttpEntity<String>(null, null);
            RestTemplate restTemplate = new RestTemplate();
            ResponseEntity<byte[]> bytes = restTemplate.exchange(url, HttpMethod.GET, entity, byte[].class);
            if (bytes.getBody().length <= 100) {
                if(urlList.containsKey(urlhref)){
                    Integer failCount = urlList.get(urlhref);
                    if(failCount > 3){
                        System.out.println("下載失?。?#34; + cl + " / " + pdfFile +"  " + urlhref);
                        return;
                    }
                    failCount++;
                    urlList.put(urlhref , failCount);
                }else{
                    urlList.put(urlhref , 1);
                }

                createPDF(folder , cl ,  pdfFile , urlhref);
            }else{
                if (!destFile.exists()) {
                    try {
                        destFile.createNewFile();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                try (FileOutputStream out = new FileOutputStream(destFile);) {
                    out.write(bytes.getBody(), 0, bytes.getBody().length);
                    out.flush();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

最終成果：

文件夾分類存放

pdf文件

TML的作用

HTML是用來開發網頁的，它是開發網頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。

超文本兩層含義：

因為網頁中還可以有圖片、視頻、音頻等內容（超越文本限制）
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接（超鏈接文本）

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
        網頁顯示內容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容

網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具

下載網址: https://code.visualstudio.com/Download

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標簽

1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

標簽的使用形式

成對出現的標簽
標簽的嵌套
單個出現的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并

網頁效果

表單標簽

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

<form>標簽表示表單標簽，定義整體的表單區域

一個表單中有很多信息組成,比如姓名,愛好,地址等,這些內容有很多其他標簽來承載

這些標簽稱為表單元素標簽

網頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

action屬性設置表單數據提交地址
method屬性設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

兩種方式的區別:

“GET”方式 : 沒有請求體
“POST”方式 : 有請求體

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點擊提交：

可以看到服務器收到了請求報文。

在線咨詢

上一篇：前端筆記之html篇
下一篇：HTML5大顯神通：8個3D視覺效果“讓你好看”

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

把HTML網頁下載為單文件，可離線訪問

在線轉pdf

使用瀏覽器打印功能轉pdf

使用本地軟件工具轉pdf

TML的作用

HTML的定義

HTML的基本結構

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

您的項目需求

把HTML網頁下載為單文件，可離線訪問