把HTML網(wǎng)頁下載為單文件，可離線訪問

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

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

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

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

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

下載完成的文件直接點擊 xxx.html 可以直接離線訪問，但是這種方式對目錄的依賴結(jié)構(gòu)比較高，怎么理解呢？就是 html 文件和對應(yīng)文件名的文件夾必須在同一個目錄中，才能正常使用。拷貝到其他機器的時候必須要兩個同時拷貝才可以，否則就會排版錯亂。

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

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

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

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

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

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

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

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

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

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

./monolith 網(wǎng)站地址 > xxx.html

默認情況下 monolith 會把生成的 html 輸出到標(biāo)準(zhǔn)輸出流，也就是當(dāng)前終端。使用 > 我們把輸出的內(nèi)容重定向并覆蓋到文件。

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

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

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

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

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

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

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

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

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

如果這篇文章對您或者您的朋友有幫助，感謝您關(guān)注，轉(zhuǎn)發(fā)。

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

在線轉(zhuǎn)pdf
使用瀏覽器打印功能轉(zhuǎn)pdf
使用本地軟件工具轉(zhuǎn)pdf

在線轉(zhuǎn)pdf

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

PDF24Tools

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

官網(wǎng)地址https://tools.pdf24.org/zh

PDF24 Tools

doctron

開源免費項目，使用golang寫的，提供在線轉(zhuǎn)

官網(wǎng)地址http://doctron.lampnick.com/

doctron在線體驗demo

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

使用瀏覽器打印功能轉(zhuǎn)pdf

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

使用本地軟件工具轉(zhuǎn)pdf

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

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

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

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

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

倉庫

運行

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

運行截圖

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

轉(zhuǎn)換效果

然后就可以寫程序去批量轉(zhuǎn)換需要的網(wǎng)頁了，但是我需要轉(zhuǎn)換的網(wǎng)頁有兩個需求

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

2、需要把網(wǎng)站的頭和尾去掉的

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

第一步：添加網(wǎng)站用戶登錄cookie

添加cookie之前

添加cookie之后

第二步：去掉網(wǎng)站頭尾

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),

打開網(wǎng)頁后執(zhí)行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()){
                //移動到對應(yīng)目錄
                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("下載失敗：" + 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是用來開發(fā)網(wǎng)頁的，它是開發(fā)網(wǎng)頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對出現(xiàn)的。

超文本兩層含義：

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

HTML的基本結(jié)構(gòu)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網(wǎng)頁標(biāo)題</title>
    </head>
    <body>
        網(wǎng)頁顯示內(nèi)容
    </body>
</html>

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

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

VS Code 安裝

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

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對應(yīng)的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

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

常用的HTML標(biāo)簽

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

標(biāo)簽的使用形式

成對出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

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

網(wǎng)頁效果

表單標(biāo)簽

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

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

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

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁效果

表單提交

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

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

兩種方式的區(qū)別:

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

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時參數(shù)名所對應(yīng)的值

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