Search code examples
qtqt5qtextbrowser

Why QTextBrowser is messing up my HTML code?

I am trying to create a PDF Invoices, since my requirement is pretty basic I thought of using HTML + QTextBrowser. I have written functions which will create HTML code according to my needs. For ex if I want to insert text there is a function for that, for inserting table also I have created a function and so on. I am setting this HTML code to QTextBrowser using setHtml() function and then I am trying to create PDF. The problem is I am not getting what I am expecting, the problem is not with my HTML code as I have used the same code and seen in Chrome Browser everything is fine. But the moment I use it in setHtml function, Qt is modifying the html code and the result is undesirable. Below I am posting my code with expected and result images too.

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);
}

The original HTML code before I set it to QTextBrowser 

"<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>"

The Modified HTML code generated by QTextBrowser 

"<!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>"

Note:: The above HTML code is as seen in debugging console which was held in QString

As seen in Chrome browser using the original html code
enter image description here

As seen in QTextBrowser enter image description here

How can I prevent QTextBrowser from messing up my html code and get my desired result?

P.S: This has happened many times before, since before my requirement was only to print the pdf i used external process called wkhtmltopdf process to create pdf, but now in this scenario i want to see the result in application itself.

Solution

  • QTextBrowser supports only a subset of HTML & CSS. For full support try using QWebView.