Qt中使用QTextDocument和HTML渲染复杂文本-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15181569/article/details/149738858

一、效果展示

在这里插入图片描述
源码分享：

mainWindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);


    QString html = "<html><body>"
                   "<h1 style='color: #336699; text-align: center;'>Qt HTML渲染示例</h1>"
                   "<hr/>"
                   "<p style='font-family: Arial; line-height: 180%;'>"
                   "这是使用<span style='font-weight: bold; color: red;'>QTextDocument</span>"
                   "渲染<span style='text-decoration: underline;'>HTML内容</span>的示例。</p>"
                   "<p>数学公式示例: ∫<sub>0</sub><sup>∞</sup> e<sup>-x</sup> dx = 1</p>"
                   "<table border='1' cellspacing='0' cellpadding='5' width='100%'>"
                   "<tr><th>技术</th><th>优点</th></tr>"
                   "<tr><td>QPainter</td><td>灵活强大</td></tr>"
                   "<tr><td>QTextDocument</td><td>格式丰富</td></tr>"
                   "</table>"
                   "</body></html>";

    QTextDocument *doc = new QTextDocument();
    doc->setHtml(html);
    this->ui->textBrowser->setDocument(doc);

}

MainWindow::~MainWindow()
{
    delete ui;
}

二、详解

核心优势

简化复杂文本渲染：HTML天然支持各种文本格式，比直接使用QPainter绘制更直观
丰富的格式支持：支持CSS样式、表格、列表、图像等丰富格式
数学公式支持：可以通过HTML+CSS或MathML实现公式渲染
自动布局：QTextDocument自动处理文本换行、分页等布局问题

在Qt中使用QTextDocument结合HTML渲染复杂文本，可通过以下步骤实现：

1. 核心组件

QTextDocument：存储富文本内容，支持HTML解析和渲染。
QTextBrowser 或 QTextEdit：用于显示文档的控件。
HTML/CSS：描述文本样式、布局和动态内容。

2. 基本使用流程

(1) 创建文档并加载HTML

// 创建文档对象
QTextDocument *doc = new QTextDocument(this);
doc->setHtml(R"(
				<html><body>"
               "<h1 style='color: #336699; text-align: center;'>Qt HTML渲染示例</h1>"
               "<hr/>"
               "<p style='font-family: Arial; line-height: 180%;'>"
               "这是使用<span style='font-weight: bold; color: red;'>QTextDocument</span>"
               "渲染<span style='text-decoration: underline;'>HTML内容</span>的示例。</p>"
               "<p>数学公式示例: ∫<sub>0</sub><sup>∞</sup> e<sup>-x</sup> dx = 1</p>"
               "<table border='1' cellspacing='0' cellpadding='5' width='100%'>"
               "<tr><th>技术</th><th>优点</th></tr>"
               "<tr><td>QPainter</td><td>灵活强大</td></tr>"
               "<tr><td>QTextDocument</td><td>格式丰富</td></tr>"
               "</table>"
               "</body></html>
)");

(2) 关联到显示控件

// 使用QTextBrowser显示
QTextBrowser *browser = new QTextBrowser(this);
browser->setDocument(doc);

// 或使用QTextEdit
QTextEdit *editor = new QTextEdit(this);
editor->setDocument(doc);

3. 渲染复杂文本特性

(1) 样式控制（CSS内联）

<p style="
    font-family: 'Arial';
    font-size: 14pt;
    color: blue;
    background-color: #f0f0f0;
    padding: 10px;
">自定义样式段落</p>

(2) 表格渲染

<table border="1" style="border-collapse: collapse;">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
    </tr>
</table>

(3) 嵌入图像

<img src=":/images/logo.png" width="100" height="50" />

(4) 超链接与锚点

<a href="https://www.qt.io">访问Qt官网</a>
<a name="section1"></a> <!-- 锚点 -->

4. 动态内容更新

通过代码修改HTML并刷新：

// 更新内容
doc->setHtml("<h2>动态更新后的内容</h2>");

// 强制重绘（若需要）
browser->viewport()->update();

5. 高级技巧

(1) 自定义字体

<p style="font-family: 'Courier New'; font-size: 12pt;">等宽字体文本</p>

(2) 响应式布局

使用百分比宽度：

<img src="image.jpg" style="width: 80%;" />

(3) 控制字符间距

QString html = "<p style='letter-spacing: 5px;'>字符间距为5px的文本</p>";

(4) 数学公式

QString html = "<p>二次方程公式: <span style='font-style: italic'>x</span>"
               "<sup>2</sup> + <span style='font-style: italic'>y</span>"
               "<sup>2</sup> = <span style='font-style: italic'>z</span>"
               "<sup>2</sup></p>";

(5) 复杂表格

QString html = "<table border='1' cellpadding='4'>"
               "<tr><th>姓名</th><th>年龄</th></tr>"
               "<tr><td>张三</td><td>25</td></tr>"
               "<tr><td>李四</td><td>30</td></tr>"
               "</table>";

(5) 混合样式文本

QString html = "<p>这是<b>粗体</b>、<i>斜体</i>、<u>下划线</u>、"
               "<span style='color: red; font-size: 18px;'>红色大字</span>"
               "的混合文本</p>";