Convert HTML to PDF

Marcus Barnet

Thank you to all, guys, for your support!

Unfortunately, I think using qtwebkit requires some skills, since I downloaded this one: https://download.qt.io/snapshots/ci/qtwebkit/5.212/latest/qtwebkit/qtwebkit-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64.7z and I got a folder that I moved to my QT directory:

C:\Qt\5.15.0\qtwebkit-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64

08/06/2021  22:50    <DIR>          .
08/06/2021  22:50    <DIR>          ..
08/06/2021  22:50    <DIR>          bin
08/06/2021  22:50    <DIR>          include
08/06/2021  22:50    <DIR>          lib
24/09/2020  14:15    <DIR>          mkspecs
08/06/2021  22:50    <DIR>          qml

and I do not know how to proceed from this step. I tried to search on the forum, but I didn't found any topic about this (only one, but it was for Linux while I'm on Windows 10).
My current program uses msvc2019_64.

I can't understand how I can build this package.

artwaw

@Marcus-Barnet It should be already build. Just reopen QtCreator and add Qt += webkit in your .pro file.
I have also Qt += webkitwidgets but I don't think you need them.

At any rate you can then do #include <QWebPage> in the header files.

Marcus Barnet

where should I copy the files contained in the archive I downloaded?

This is the path where my qmake is:

C:\Qt\5.15.0\msvc2019_64\bin\qmake.exe

should I copy the content of:

C:\Qt\5.15.0\qtwebkit-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64
08/06/2021  22:50    <DIR>          .
08/06/2021  22:50    <DIR>          ..
08/06/2021  22:50    <DIR>          bin
08/06/2021  22:50    <DIR>          include
08/06/2021  22:50    <DIR>          lib
24/09/2020  14:15    <DIR>          mkspecs
08/06/2021  22:50    <DIR>          qml

in this directory?

C:\Qt\5.15.0\msvc2019_64

19/07/2020  21:36    <DIR>          .
19/07/2020  21:36    <DIR>          ..
29/07/2020  10:15    <DIR>          bin
19/07/2020  21:34    <DIR>          doc
19/07/2020  21:36    <DIR>          include
19/07/2020  21:39    <DIR>          lib
19/07/2020  21:34    <DIR>          mkspecs
19/07/2020  21:34    <DIR>          phrasebooks
19/07/2020  21:36    <DIR>          plugins
19/07/2020  21:36    <DIR>          qml
19/07/2020  21:36    <DIR>          resources
19/07/2020  21:36    <DIR>          translations

Sorry for the stupid question, but I can't understand how to use these files.
Usually, in linux, there is /src and /lib folders that you can pass as parameter to the compiler.

artwaw

@Marcus-Barnet yes. exactly there, all folders' content to the respective folders.

Marcus Barnet

thank you, I did as you suggested and now I get no errors when I try to call QWebPage.

Later, this evening, I will try to use it for the PDF and I will update you.

Marcus Barnet

I tried to convert the html to pdf, it works fine even if this process doesn't include a PNG image which is included in the HTML page.

Unfortunately, this image is very important since it is a logo which must be included also in the PDF file. (I use the <img> tag to insert the image)
Is there any specific reason for not including the image?

Moreover, I noticed that the table borders are displayed in grey color while they should be black.
This is the code I'm using:

  ```
       QWebPage page;
       page.mainFrame()->setHtml(html_scheda);

       QPrinter printer(QPrinter::HighResolution);
       printer.setOrientation(QPrinter::Portrait);
       printer.setOutputFormat(QPrinter::PdfFormat);
       printer.setPaperSize(QPrinter::A4);
       printer.setPageMargins(QMarginsF(5, 5, 5, 5));
       QString fileName = "C:/folder/test.pdf";
       printer.setOutputFileName(fileName);

       page.mainFrame()->print(&printer);

artwaw

@Marcus-Barnet from documentation: External objects referenced in the content are located relative to baseUrl. I'd search in that direction.

Marcus Barnet

@artwaw said in Convert HTML to PDF:

@Marcus-Barnet from documentation: External objects referenced in the content are located relative to baseUrl. I'd search in that direction.

The problem is that the logo is loaded from the network, so I do not know what kind of base_url I should specify.

This is the HTML where I load the picture:

html_scheda = "<table align=\"center\" border=\"0\" style=\"border-collapse: collapse; width: 21cm; height: 29 cm;\"> <tbody> <tr> <td style=\"width: 100%;\"> <table border=\"0\" style=\"height: 146px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto;\"> <tbody> <tr style=\"height: 0px;\"> <td style=\"width: 50%; height: 146px; text-align: center;\" rowspan=\"4\"><img width=\"200\" align=\"center\" src=\"http://www.robo-dyne.com/pics/pump_logo.png\" alt=\"\" /></td>

What should I use as baseurl in this situation?

AlexMaly

We had the same problem and while webkit is viable option it does not support everything we needed.
We tried a few options, but the best result was produced with using chrome:
It can do it in headless mode
google-chrome --headless --disable-gpu --print-to-pdf=file1.pdf http://www.example.com/

So if you could make sure chrome is installed on your system, this would be an approach I recommend.

Marcus Barnet

Does this work also on Windows?

Even if I would prefer to use QT functionalities to export the PDF.

JonB

@Marcus-Barnet
I will throw this in. I do not know if it is right/will help, but....

I previously suggested you use the supported/supplied Qt WebEngine, not Qt WebKit. But for whatever reason you have gone down the WebKit route :) I do not compile anything Qt (Linux). For Windows I do not know whether you have to compile or whether you download already-built. I gather WebEngine requires MSVC, not MinGW, but that seems to be what you are using anyway.

Web Engine uses the chromium engine. From @AlexMaly's post, I'm thinking/hoping this would do the necessary "chrome" facility for you, and access external URLs without problem?

You would have to check. I leave you with this possibility....

Marcus Barnet

@JonB said in Convert HTML to PDF:

@Marcus-Barnet
I will throw this in. I do not know if it is right/will help, but....

I previously suggested you use the supported/supplied Qt WebEngine, not Qt WebKit. But for whatever reason you have gone down the WebKit route :) I do not compile anything Qt (Linux). For Windows I do not know whether you have to compile or whether you download already-built. I gather WebEngine requires MSVC, not MinGW, but that seems to be what you are using anyway.

Web Engine uses the chromium engine. From @AlexMaly's post, I'm thinking/hoping this would do the necessary "chrome" facility for you, and access external URLs without problem?

You would have to check. I leave you with this possibility....

I didn't use WebEngine because I thought that WebKit was easier! But it is not working as expected, so I'll give it a try! :)
I think I should use this one: https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-html2pdf-example.html as an example and make it fit my needs, is it correct?

Thank you!

JonB

@Marcus-Barnet said in Convert HTML to PDF:

I think I should use this one: https://doc.qt.io/qt-5/qtwebengine-webenginewidgets-html2pdf-example.html as an example and make it fit my needs, is it correct?

Indeed. I didn't know that example existed. Looks like what you are wanting to do, so seems a good starting point!

artwaw

@Marcus-Barnet I will try to build basic webkit browser and check that for you later today. You got me curious. To all my knowledge and experience this should work just fine.

artwaw

@Marcus-Barnet Hi,
I got some spare time right now and this is the result:

Code:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtWebKit>
#include <QtWebKitWidgets>
#include <QtPrintSupport>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QWebPage *page;
};
#endif // MAINWINDOW_H

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

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    page = new QWebPage(this);
    page->mainFrame()->setHtml("<table align=\"center\" border=\"0\" style=\"border-collapse: collapse; width: 21cm; height: 29 cm;\"> <tbody> <tr> <td style=\"width: 100%;\"> <table border=\"0\" style=\"height: 146px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto;\"> <tbody> <tr style=\"height: 0px;\"> <td style=\"width: 50%; height: 146px; text-align: center;\" rowspan=\"4\"><img width=\"200\" align=\"center\" src=\"http://www.robo-dyne.com/pics/pump_logo.png\" alt=\"\" /></td>");
    ui->view->setPage(page);
    QPrinter *printer = new QPrinter(QPrinter::HighResolution);
    printer->setPageSize(QPrinter::A4);
    printer->setOutputFormat(QPrinter::PdfFormat);
    printer->setOutputFileName(QFileDialog::getSaveFileName(this,"Save location",QStandardPaths::writableLocation(QStandardPaths::DocumentsLocation)));
    page->mainFrame()->print(printer);
    delete printer;
}

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

QT       += core gui webkit webkitwidgets printsupport

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11
CONFIG +=s dk_no_version_check

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    mainwindow.cpp

HEADERS += \
    mainwindow.h

FORMS += \
    mainwindow.ui

Resulting pdf file is here: https://trollnet.com.pl/dwn/webkitTest.pdf

I'd say it works?

EDIT:
UI has one QWidget in the grid layout promoted to QWebView (named, surprisingly, view).
I did additional tests where I removed the displayed part (which was added only to test the page anyway) and resulting pdf file is exactly the same, so we can exclude presence of QWebView form having any impact. QWebPage rendering and printout works perfectly fine with the sample you provided.

Marcus Barnet

@artwaw said in Convert HTML to PDF:

@Marcus-Barnet Hi,
I got some spare time right now and this is the result:

Code:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtWebKit>
#include <QtWebKitWidgets>
#include <QtPrintSupport>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
    QWebPage *page;
};
#endif // MAINWINDOW_H

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

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    page = new QWebPage(this);
    page->mainFrame()->setHtml("<table align=\"center\" border=\"0\" style=\"border-collapse: collapse; width: 21cm; height: 29 cm;\"> <tbody> <tr> <td style=\"width: 100%;\"> <table border=\"0\" style=\"height: 146px; width: 100%; border-collapse: collapse; margin-left: auto; margin-right: auto;\"> <tbody> <tr style=\"height: 0px;\"> <td style=\"width: 50%; height: 146px; text-align: center;\" rowspan=\"4\"><img width=\"200\" align=\"center\" src=\"http://www.robo-dyne.com/pics/pump_logo.png\" alt=\"\" /></td>");
    ui->view->setPage(page);
    QPrinter *printer = new QPrinter(QPrinter::HighResolution);
    printer->setPageSize(QPrinter::A4);
    printer->setOutputFormat(QPrinter::PdfFormat);
    printer->setOutputFileName(QFileDialog::getSaveFileName(this,"Save location",QStandardPaths::writableLocation(QStandardPaths::DocumentsLocation)));
    page->mainFrame()->print(printer);
    delete printer;
}

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

QT       += core gui webkit webkitwidgets printsupport

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11
CONFIG +=s dk_no_version_check

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    mainwindow.cpp

HEADERS += \
    mainwindow.h

FORMS += \
    mainwindow.ui

Resulting pdf file is here: https://trollnet.com.pl/dwn/webkitTest.pdf

I'd say it works?

EDIT:
UI has one QWidget in the grid layout promoted to QWebView (named, surprisingly, view).
I did additional tests where I removed the displayed part (which was added only to test the page anyway) and resulting pdf file is exactly the same, so we can exclude presence of QWebView form having any impact. QWebPage rendering and printout works perfectly fine with the sample you provided.

I really do not know what to say, but I tried your code and it doesn't work for me!
It doesn't display the image in the PDF file.

Marcus Barnet

it's strange because everything else works fine, but the images are not displayed.

Marcus Barnet

@AlexMaly said in Convert HTML to PDF:

We had the same problem and while webkit is viable option it does not support everything we needed.
We tried a few options, but the best result was produced with using chrome:
It can do it in headless mode
google-chrome --headless --disable-gpu --print-to-pdf=file1.pdf http://www.example.com/

So if you could make sure chrome is installed on your system, this would be an approach I recommend.

This solution works and it is able to generate the PDF by including also the images, but I can't scale the result PDF.
I need to fit all the content in a A4 format and to do so I need to scale the print to 93%. It seems that chrome doesn't provide this feature.

Marcus Barnet

At the moment, I solved the conversion problem by using wkhtmltopdf.

However, I was trying to generated a PDF file to be able to send it by email as an attachment since sometimes the HTML webpages are blocked by the antivirus (I guess) and they cannot be read by the user.
I was thinking to solve the problem by sending PDF files instead of HTML, but the attachments keep to be blocked on some smartphones!!

artwaw

@Marcus-Barnet That, I believe, is a problem with settings of the said smartphone mail client or account and I am not sure if you can do anything to prevent that.
Ugly solution might be to ditch pdf and render a4 size png image and include that as an attachment (but I am totally not sure if that would work with mail filters).