在線HTML編輯器快速轉(zhuǎn)將內(nèi)容為HTML原始碼網(wǎng)頁(yè)設(shè)著計(jì)利器

得以前剛開(kāi)始接觸網(wǎng)頁(yè)制作時(shí)都是使用Microsoft FrontPage編輯器，也正因?yàn)橛兴?jiàn)即得編輯器，才能讓原本復(fù)雜難懂的HTML原始碼變得更簡(jiǎn)單易懂，它將原始碼轉(zhuǎn)換成可視化內(nèi)容，只要直接輸入文字、圖片、超連接后修改樣式即可將網(wǎng)頁(yè)制作出來(lái)，當(dāng)然這些頁(yè)面背后仍是有所謂的HTML代碼存在，只在需要時(shí)才會(huì)切換原始碼模式。

我后來(lái)還是很習(xí)慣通過(guò)所見(jiàn)即所得（What You See Is What You Get，縮寫(xiě)WYSIWYG）編輯器寫(xiě)文章，WordPress內(nèi)置文章編輯功能就是此形式，有時(shí)候遇到要編輯網(wǎng)頁(yè)也會(huì)使用這個(gè)工具來(lái)產(chǎn)生HTML代碼，畢竟以看得到的方式編輯比較容易得到自己需要的東西，大概就是這么一回事。

現(xiàn)在網(wǎng)頁(yè)編輯器已沒(méi)有像十幾年前那么盛行了，可能很多人的電腦里早已沒(méi)有類(lèi)似的應(yīng)用程序，如果你還是需要這功能，HTML Editor或許可以應(yīng)急，這是一款在線免費(fèi)HTML可視化編輯器，直接打開(kāi)瀏覽器就能使用，它就像一般的網(wǎng)頁(yè)編輯器，使用者可以直接在編輯器里建立圖文內(nèi)容，HTML Editor會(huì)在另一畫(huà)面顯示HTML原始碼，編輯時(shí)就能直接取得對(duì)應(yīng)的原始碼以便使用于博客文章或網(wǎng)頁(yè)制作。

這功能看起來(lái)雖然好像微不足道，事實(shí)上當(dāng)你需要時(shí)就會(huì)非常方便，HTML Editor不限于Windows或Mac使用，而且更重要的是不用額外下載安裝軟件；對(duì)于不熟悉HTML編寫(xiě)的使用者來(lái)說(shuō)，它也能快速制作出帶有樣式的原始碼，尤其是拿來(lái)撰寫(xiě)網(wǎng)頁(yè)表格，直接使用可視化編輯器會(huì)更簡(jiǎn)單。

印象中舊版Microsoft Office也有類(lèi)似功能，不過(guò)很可惜現(xiàn)在新版好像已經(jīng)沒(méi)有了。

站點(diǎn)名稱：HTML Editor

網(wǎng)站連接：https://htmleditor.io/

使用教學(xué)

STEP 1

開(kāi)啟HTML Editor網(wǎng)站后，畫(huà)面被切割成左右兩個(gè)部分，左邊為所見(jiàn)即所得編輯器，右邊是顯示原始碼的字段，一開(kāi)始已經(jīng)有示例內(nèi)容，可以看到編輯器里樣式文字已經(jīng)被轉(zhuǎn)為我們熟悉的HTML程序碼并顯示于網(wǎng)站右側(cè)。

STEP 2

使用方法很簡(jiǎn)單，我就不通盤(pán)介紹所有編輯器的功能，大致上比較會(huì)用到的例如格式，可以調(diào)整H1、H2、H3等不同層級(jí)的標(biāo)題，亦能加入粗體、斜體、項(xiàng)目符號(hào)、縮排或設(shè)定對(duì)齊方向等等，其它例如插入超連接、圖片或視頻也都能從編輯器上方的功能按鈕來(lái)做到。

我認(rèn)為HTML Editor最方便的是可以拿來(lái)做網(wǎng)頁(yè)表格，從「Table」以鼠標(biāo)光標(biāo)快速設(shè)定要多少字段，即可在編輯器里插入表格，同時(shí)設(shè)定每個(gè)字段要顯示那些內(nèi)容。如果要直接以代碼來(lái)撰寫(xiě)表格可能稍嫌復(fù)雜，以所見(jiàn)即所得編輯器會(huì)簡(jiǎn)單許多。

STEP 3

當(dāng)你一邊在使用編輯器時(shí)，右側(cè)就會(huì)同步顯示對(duì)應(yīng)的HTML代碼，跟早期網(wǎng)頁(yè)編輯器功能差不多，最后直接復(fù)制代碼，就能將它復(fù)制、使用到其它地方，可以說(shuō)非常好用！也不用再因?yàn)樾枰a(chǎn)生原始碼而去找網(wǎng)頁(yè)編輯器，從瀏覽器開(kāi)啟HTML Editor即可。

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

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

在線轉(zhuǎn)pdf

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

PDF24Tools

各種pdf的操作都有，免費(fèi)使用，速度一般。

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

PDF24 Tools

doctron

開(kāi)源免費(fèi)項(xiàng)目，使用golang寫(xiě)的，提供在線轉(zhuǎn)

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

doctron在線體驗(yàn)demo

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

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

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

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

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

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

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

管他的，先把代碼下載下來(lái)再說(shuō)

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

倉(cāng)庫(kù)

運(yùn)行

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

運(yùn)行截圖

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

轉(zhuǎn)換效果

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

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

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

這就為難我了，不會(huì)go語(yǔ)言啊，硬著頭皮搞了，肯定有個(gè)地方打開(kāi)這個(gè)url的，就去代碼慢慢找，慢慢調(diào)試，功夫不負(fù)有心人，終于找到調(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),

打開(kāi)網(wǎng)頁(yè)后執(zhí)行js代碼把頭尾隱藏掉

第三步：程序化，批量自動(dòng)生成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()){
                //移動(dòng)到對(duì)應(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();
        }
    }

最終成果：

文件夾分類(lèi)存放

pdf文件

lotato 可以將任意網(wǎng)頁(yè)轉(zhuǎn)為 Web 應(yīng)用，讓你在電腦上體驗(yàn)移動(dòng)網(wǎng)頁(yè)帶來(lái)的輕便和快捷。

使用 Web 應(yīng)用代替原生應(yīng)用有著諸多好處，節(jié)省設(shè)備的存儲(chǔ)空間，降低內(nèi)存占用，有的網(wǎng)頁(yè)比應(yīng)用程序更加簡(jiǎn)單清爽，使用體驗(yàn)更好。手機(jī)上的瀏覽器一般都有「將網(wǎng)頁(yè)保存到桌面」的選項(xiàng)，微信、支付寶也推出了小程序。那在電腦上該怎么辦？

你可以嘗試一下這個(gè)叫 Flotato 的 Mac 應(yīng)用，它可以將任意網(wǎng)頁(yè)轉(zhuǎn)為 Web 應(yīng)用，在電腦上體驗(yàn)移動(dòng)網(wǎng)頁(yè)帶來(lái)的輕便和快捷。

我們之前給大家分享過(guò)一些好用的在線工具，用它們可以滿足很多日常工作的需求，比如格式轉(zhuǎn)換、壓縮圖片、下載視頻。把這些工具收藏到書(shū)簽里，需要的時(shí)候打開(kāi)瀏覽器就可以了，非常方便。最近，我們對(duì)這些在線工具進(jìn)行了重新整理，不管你用的是 Mac 還是 PC，都值得收藏。
關(guān)注極客之選公眾號(hào)（GeekChoice），回復(fù)關(guān)鍵詞「在線工具」，獲取全部網(wǎng)頁(yè)工具地址。

在線咨詢

上一篇：瀏覽器輸入 URL 后回車(chē)發(fā)生了什么？
下一篇：HTML講解-網(wǎng)頁(yè)中的文本框

您的項(xiàng)目需求

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

整合營(yíng)銷(xiāo)服務(wù)商

在線HTML編輯器快速轉(zhuǎn)將內(nèi)容為HTML原始碼網(wǎng)頁(yè)設(shè)著計(jì)利器

在線轉(zhuǎn)pdf

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

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

您的項(xiàng)目需求