Javascript - 3種 HTML 轉(zhuǎn)換為純文本的方法

幾天，我手里的一個項目需要將富文本的所有 html 標(biāo)簽全部刪除，得到純文本后再存儲到數(shù)據(jù)庫中。在一系列得搜索操作之后，我找到了實現(xiàn)這個目的的幾種方法，在這里我分享給大家，當(dāng)你遇到同樣的情況興許也能用的上。

1. 使用 .replace(/<[^>]*>/g, '')

這個方法是從文本中去除 html 標(biāo)簽最簡單的方法。它使用字符串的方法 .replace(待替換的字符串，替換后的字符串) 將 HTML 標(biāo)簽替換成空值。 /g 是表示替換字符串所有匹配的值，即字符串中所有符合條件的字符都將被替換。

這個方法的缺點是有些 HTML 標(biāo)簽不能被剔除，不過它依然很好用。

2. 創(chuàng)建臨時DOM元素并獲取其中的文本

這種方法是完成該問題的最有效的方法。創(chuàng)建一個臨時 DOM 并給他賦值，然后我們使用 DOM 對象方法提取文本。

3. 使用 html-to-text npm 包

html-to-text 這個包的功能很全了，轉(zhuǎn)換也有許多的選項比如：wordwrap, tags, whitespaceCharacters , formatters 等等。

安裝：

npm install html-to-text

使用：

最后感謝閱讀，如果此文對您有幫助，請點贊或添加關(guān)注。

嘍，今天是一篇HTML to PDF速食指南。

Java 轉(zhuǎn)換 HTML 到PDF有許多類庫，今天我們介紹一下第三方免費(fèi)的類庫OpenPDF。

1. OpenPDF

OpenPDF是免費(fèi)的Java類庫，遵從LGPL 和 MPL協(xié)議，所以基本上能夠可以隨意使用。OpenPDF是基于iTEXT的，目前來說也是維護(hù)的比較好的Java操作PDF的開源軟件。

話不多說，且看所需要的依賴，

<dependency>    
    <groupId>org.jsoup</groupId>    
    <artifactId>jsoup</artifactId>   
    <version>1.13.1</version> 
</dependency>
<dependency>
    <groupId>com.openhtmltopdf</groupId>
    <artifactId>openhtmltopdf-core</artifactId>
    <version>1.0.6</version>
</dependency>
<dependency>
    <groupId>com.openhtmltopdf</groupId>
    <artifactId>openhtmltopdf-pdfbox</artifactId>
    <version>1.0.6</version>
</dependency>

jsoup可以將html文件轉(zhuǎn)換成輸入流等，也可以遍歷html的DOM節(jié)點，提取元素及樣式等。

2. 示例

本篇示例將以下html文件轉(zhuǎn)換成pdf

<html>
<head>
    <style>
        .center_div {
            border: 1px solid #404e94;
            margin-left: auto;
            margin-right: auto;
            background-color: #f6d0ed;
            text-align: left;
            padding: 8px;
        }
        table {
            width: 100%;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
        }
        body,html,input{font-family:"msyh";}
    </style>
</head>
<body>
<div class="center_div">
    <h1>Hello java North!</h1>
    <div>
        <p>convert html to pdf.</p>
    </div>
    <div>
        <table>
            <thead>
                <th>ROLE</th>
                <th>NAME</th>
                <th>TITLE</th>
            </thead>
            <tbody>
                <tr>
                    <td>MARKSMAN</td>
                    <td>ASHE</td>
                    <td>THE FROST ARCHER</td>
                </tr>
                <tr>
                    <td>MAGES</td>
                    <td>ANNIE</td>
                    <td>THE DARK CHILD</td>
                </tr>
                <tr>
                    <td>射手</td>
                    <td>凱塔琳</td>
                    <td>皮城女警</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

以上html用瀏覽器打開如下，亂碼是因為中文字體不識別，下面轉(zhuǎn)換的時候會加載對應(yīng)的字體來進(jìn)行轉(zhuǎn)換。

使用Java轉(zhuǎn)換HTML到PDF代碼如下：

public class HtmlToPDFOpenSource {
    public static void main(String[] args) throws IOException {
        HtmlToPDFOpenSource htmlToPDFOpenSource = new HtmlToPDFOpenSource();
        htmlToPDFOpenSource.generatePdfByOpenhtmltopdf();
    }

    private  void generatePdfByOpenhtmltopdf() throws IOException {
        File inputHtml = new File("E:\\javaNorth\\java-study-note\\javaOpenSource\\src\\main\\resources\\test.html");

        //加載html文件
        Document document = Jsoup.parse(inputHtml, "UTF-8");
        document.outputSettings().syntax(Document.OutputSettings.Syntax.html);
        
        //引入資源目錄，可以單獨(dú)引入css，圖片文件等
        String baseUri = FileSystems.getDefault()
            .getPath("javaOpenSource\\src\\main\\resources")
            .toUri().toString();
       
        try (OutputStream os = new FileOutputStream("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf")) {
            PdfRendererBuilder builder = new PdfRendererBuilder();
            builder.withUri("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf");
            builder.toStream(os);
            builder.withW3cDocument(new W3CDom().fromJsoup(document), baseUri);
            
            //引入指定字體，注意字體名需要和css樣式中指定的字體名相同
            builder.useFont(new File("javaOpenSource\\src\\main\\resources\\fonts\\msyh.ttf"),"msyh",1,BaseRendererBuilder.FontStyle.NORMAL, true);
            builder.run();
        }
    }
}

使用Java代碼轉(zhuǎn)換成PDF如下（示例中使用了微軟雅黑中文字體）：

上述html文件中增加如下外部樣式：

<link href="style.css" rel="stylesheet">

并在resources目錄下添加style.css文件，重新生成PDF文件如下。

3. 總結(jié)

本片介紹了使用OpenPDF將html文件轉(zhuǎn)換成PDF文件。同時也使用了自定義字體，外部樣式。但是以下幾點需要格外注意。

Java代碼中加載的字體名稱要和HTML引用的CSS樣式中的字體名相同（{font-family:"msyh";}）。
HTML文件標(biāo)簽節(jié)點必須閉合（<xxx></xxx>）.否則解析會失敗。

全部示例在此：https://github.com/javatechnorth/java-study-note/tree/master/javaOpenSource/src/main/java/pdf

文章來源：Java技術(shù)指北

慶假期很適合學(xué)習(xí)點新知識。前幾天有粉絲在后臺問我關(guān)于使用 js 開發(fā)后端服務(wù)的建議，我給推薦了這一個面向小白的走向全棧開發(fā)工程師的教程。

關(guān)于這個全棧入門教程

這是一個面向零基礎(chǔ)的基于 JavaScript 語言的全棧開發(fā)教程，教程基于目前流行的前后端分離開發(fā)模式，使用 Vue.js + Node.js 并且通過從實際需求的角度來完成基礎(chǔ)的業(yè)務(wù)代碼，沒有過多功能封裝，幾乎都是底層的代碼，通俗易懂，上手容易。

教程截圖

關(guān)于作者

這套 JavaScript 全棧教程的作者是廖雪峰，是一位有著超過十年軟件開發(fā)經(jīng)驗的大神，精通 Java / Python / Ruby / Visual Basic / Objective C 等，對開源框架有很深入的研究，著有《Spring 2.0核心技術(shù)與最佳實踐》一書，是很多后端開發(fā)工程師非常熟知的業(yè)內(nèi)大神。

教程目錄

因為針對的是對 javascript 零基礎(chǔ)的小白用戶，因此這個教程有很大篇幅是 javascript 語言入門。

JavaScript簡介
快速入門
函數(shù)
標(biāo)準(zhǔn)對象
面向?qū)ο缶幊?/span>
瀏覽器
jQuery
錯誤處理
underscore
Node.js

學(xué)習(xí)建議和感想

這是我毫無后端開發(fā)經(jīng)驗時學(xué)習(xí)后端開發(fā)的入門的教程，這套教程讓我學(xué)會了如何使用 javascript 來開發(fā)后端 api 接口。而且前面的基礎(chǔ)語法教程，也看得津津有味，復(fù)習(xí)了很多不會用、不常用但很巧妙的代碼實現(xiàn)。這是我推薦這個教程的最大原因。

教程截圖

這個教程除了適合零基礎(chǔ)的小白，我認(rèn)為這更像一個寫給后端開發(fā)者的、從其他后端語言轉(zhuǎn) javascript 的教程，如果像我之前學(xué)習(xí)的那樣沒有過后端開發(fā)經(jīng)驗，就需要注意幾個問題：

教程涉及的代碼最后自己敲出來實現(xiàn)一遍，看懂并不代表會寫
后端開發(fā)設(shè)計的基礎(chǔ)知識很多，建議提前了解數(shù)據(jù)庫、服務(wù)器基本知識，學(xué)習(xí)起來會更順暢
教程中很多關(guān)聯(lián)的代碼片段，拷貝出來配合流程圖來理解，會事半功倍

入門靠老師，修行靠自己。總的來說，這只是一套非常基礎(chǔ)的入門教程，學(xué)完后能夠了解前端開發(fā)和后端開發(fā)，可以實現(xiàn)簡單的 demo，可以幫助我們學(xué)習(xí) koa / egg.js 這類基于 Node.js 的后端開發(fā)框架，但后端開發(fā)需要學(xué)習(xí)的知識很多，數(shù)據(jù)庫設(shè)計、查詢優(yōu)化、架構(gòu)設(shè)計等等，成為一個合格的全棧工程師，路還有很遠(yuǎn)。

教程免費(fèi)學(xué)習(xí)說明

這是一個完全免費(fèi)的 JavaScript 全棧入門教程，就算完全不懂 js 也能快速入門，在線免費(fèi)學(xué)習(xí)。如果想學(xué) js 語法，也可以看看之前推薦過的阮一峰寫的免費(fèi) javascript 系統(tǒng)學(xué)習(xí)入門教程。

最后祝各位有所收獲，邁進(jìn)全棧開發(fā)工程師行列。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。

↓↓點擊查看本次分享的網(wǎng)址。

JavaScript 全棧開發(fā)入門 - 由廖雪峰提供的面向小白的免費(fèi)在線教程｜那些免費(fèi)的磚

在線咨詢

上一篇：青年長江學(xué)者答辯ppt制作案例-青長ppt模板下載-長江學(xué)者獎勵計劃
下一篇：Go Web 框架 Gin 學(xué)習(xí)3 - 模板渲染多級目錄與模板傳參

您的項目需求

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

整合營銷服務(wù)商