为啥 QTextBrowser 弄乱了我的 HTML 代码？

Posted 2023-02-17

技术标签:

【中文标题】为啥 QTextBrowser 弄乱了我的 HTML 代码？【英文标题】：Why QTextBrowser is messing up my HTML code?为什么 QTextBrowser 弄乱了我的 HTML 代码？ 【发布时间】：2018-10-01 10:39:29 【问题描述】：

我正在尝试创建 PDF 发票，因为我的要求非常基本，我想到了使用 html + QTextBrowser。我已经编写了可以根据我的需要创建 HTML 代码的函数。例如，如果我想插入文本，则有一个函数，对于插入表格，我也创建了一个函数等等。我正在使用 setHtml() 函数将此 HTML 代码设置为 QTextBrowser，然后我正在尝试创建 PDF。问题是我没有得到我所期望的，问题不在于我的 HTML 代码，因为我使用了相同的代码并且在 Chrome 浏览器中看到一切都很好。但是当我在 setHtml 函数中使用它时，Qt 正在修改 html 代码，结果不理想。下面我也发布了带有预期和结果图像的代码。

void PDF_API::Save(const QString &filePath)
 
    QTextDocument document;
    document.setHtml(HTMLCode); // HTMLCode is a QString obj that holds all my html code

    // Creates a copy in html to check the html code. Comment the code if not needed
    QFile file(QDir::currentPath()+"/report.html");
    if(file.open(QFile::WriteOnly))
    
        file.write(HTMLCode.toStdString().c_str());
        file.close();
    

    // Printing begins here
    QPrinter printer(QPrinter::PrinterResolution);
    printer.setOutputFormat(QPrinter::PdfFormat);
    printer.setPaperSize(QPrinter::Tabloid);
    printer.setOutputFileName(filePath);
    printer.setPageMargins(QMarginsF(0.1, 0.01, 0.1, 0.1));
    document.print(&printer);

我设置为QTextBrowser之前的原始HTML代码

"<html><body><p align=\"center\" style=\"color: #000000; font-family: Times New Roman; font-size: 12pt; line-height: 100%;\">  <b>CENTER </b> </p><hr><p style = \"text-align:left; color: #ff0000; font-family: Times New Roman; font-size: 14pt; line-height: 100%;\"> <b>Left Text</b> <span style = \"float:right; color: #ffff00; font-family: Times New Roman; font-size: 14pt; line-height: 100%;\"> <b>Right Text</b> </span> </p></body></html>"

QTextBrowser生成的修改后的HTML代码

"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n<html><head><meta name=\"qrichtext\" content=\"1\" /><style type=\"text/css\">\np, li  white-space: pre-wrap; \n</style></head><body style=\" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;\">\n<p align=\"center\" style=\" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; line-height:100%;\"><span style=\" font-family:'Times New Roman'; font-size:12pt; font-weight:600; color:#000000;\">CENTER </span></p>\n<hr />\n<p style=\" margin-top:12px; margin-bottom:12px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; line-height:100%;\"><span style=\" font-family:'Times New Roman'; font-size:14pt; font-weight:600; color:#ff0000;\">Left Text</span><span style=\" font-family:'Times New Roman'; font-size:14pt; color:#ff0000;\"> </span><span style=\" font-family:'Times New Roman'; font-size:14pt; font-weight:600; color:#ffff00;\">Right Text</span><span style=\" font-family:'Times New Roman'; font-size:14pt; color:#ffff00;\"> </span></p></body></html>"

注意：：上面的HTML代码是在QString中保存的调试控制台中看到的

使用原始html代码在Chrome浏览器中看到

在 QTextBrowser 中看到

如何防止 QTextBrowser 弄乱我的 html 代码并获得我想要的结果？

P.S:这种情况以前发生过很多次，因为在我的要求只是打印 pdf 之前，我使用名为 wkhtmltopdf 的外部进程来创建 pdf，但现在在这种情况下，我想看看导致应用程序本身。

【问题讨论】：

QTextBrowser 仅支持HTML & CSS 的子集 【参考方案1】：

QTextBrowser 仅支持HTML & CSS 的子集。如需全面支持，请尝试使用QWebView。

【讨论】：

是的，我检查过了，因为我只使用了像 span 这样的基本 html 标签，所以应该支持它。我不能使用 QWebView，因为它不是在我的环境中构建的，而且我没有时间构建 QWebView 经过进一步研究，发现 Qt 部分支持 'float'，即仅在表格和图像中支持。

以上是关于为啥 QTextBrowser 弄乱了我的 HTML 代码？的主要内容，如果未能解决你的问题，请参考以下文章

自动布局弄乱了我的动画