Javascript - 3種 HTML 轉換為純文本的方法

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

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

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

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

2. 創建臨時DOM元素并獲取其中的文本

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

3. 使用 html-to-text npm 包

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

安裝：

npm install html-to-text

使用：

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

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

Java 轉換 HTML 到PDF有許多類庫，今天我們介紹一下第三方免費的類庫OpenPDF。

1. OpenPDF

OpenPDF是免費的Java類庫，遵從LGPL 和 MPL協議，所以基本上能夠可以隨意使用。OpenPDF是基于iTEXT的，目前來說也是維護的比較好的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文件轉換成輸入流等，也可以遍歷html的DOM節點，提取元素及樣式等。

2. 示例

本篇示例將以下html文件轉換成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用瀏覽器打開如下，亂碼是因為中文字體不識別，下面轉換的時候會加載對應的字體來進行轉換。

使用Java轉換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);
        
        //引入資源目錄，可以單獨引入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代碼轉換成PDF如下（示例中使用了微軟雅黑中文字體）：

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

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

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

3. 總結

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

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

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

文章來源：Java技術指北

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

關于這個全棧入門教程

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

教程截圖

關于作者

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

教程目錄

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

JavaScript簡介
快速入門
函數
標準對象
面向對象編程
瀏覽器
jQuery
錯誤處理
underscore
Node.js

學習建議和感想

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

教程截圖

這個教程除了適合零基礎的小白，我認為這更像一個寫給后端開發者的、從其他后端語言轉 javascript 的教程，如果像我之前學習的那樣沒有過后端開發經驗，就需要注意幾個問題：

教程涉及的代碼最后自己敲出來實現一遍，看懂并不代表會寫
后端開發設計的基礎知識很多，建議提前了解數據庫、服務器基本知識，學習起來會更順暢
教程中很多關聯的代碼片段，拷貝出來配合流程圖來理解，會事半功倍

入門靠老師，修行靠自己。總的來說，這只是一套非常基礎的入門教程，學完后能夠了解前端開發和后端開發，可以實現簡單的 demo，可以幫助我們學習 koa / egg.js 這類基于 Node.js 的后端開發框架，但后端開發需要學習的知識很多，數據庫設計、查詢優化、架構設計等等，成為一個合格的全棧工程師，路還有很遠。

教程免費學習說明

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

最后祝各位有所收獲，邁進全棧開發工程師行列。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

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

在線咨詢

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

您的項目需求

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

整合營銷服務商