导出为PDF UI场景（QML）

Question

我希望界面中出现的图像和文本呈现为PDF。我有一个按钮，当触发该按钮时，它将界面中显示的所有内容保存为 PDF（如导出为 PDF）。为此，我查看了资源和论坛中打开的主题，但无法得出明确的结果。如果您能对此提供帮助，我将非常高兴。

Answer 1

您应该在

PrintSupport

文件中启用

.pro

模块，如

QT+=PrintSupport

首先像这样声明Drawer类：

#pragma once
#include <QQmlApplicationEngine>

class PdfExporter : public QQmlApplicationEngine
{
    Q_OBJECT

public:
    PdfExporter(QQmlApplicationEngine * engine);
    Q_INVOKABLE void screenShot();
private:
    QQmlApplicationEngine * mEngine;
};

并定义：

#include <Drawer.h>
#include <QQuickWindow>
#include <QPrinter>
#include <QPainter>

PdfExporter::PdfExporter(QQmlApplicationEngine *engine) : QQmlApplicationEngine(engine), mEngine(engine)
{

}

void PdfExporter::screenShot()
{
    foreach(QObject* obj, mEngine->rootObjects()) {
      QQuickWindow* window = qobject_cast<QQuickWindow*>(obj);
      if (window)
      {
        QImage windowImage = window->grabWindow();
        QPrinter pdfPrinter(QPrinter::HighResolution);
        pdfPrinter.setOutputFormat(QPrinter::PdfFormat);
        pdfPrinter.setOutputFileName("test.pdf");
        QPainter painter;
        painter.begin(&pdfPrinter);
        painter.drawImage(QRect(0,0,windowImage.width(),windowImage.height()),windowImage,{0,0,windowImage.width(),windowImage.height()});
        painter.end();
      }
    }
}

在

main.cpp

中，我更喜欢将 C++ 类作为上下文属性导出到引擎。

 PdfExporter * dr = new PdfExporter(&engine);
 engine.rootContext()->setContextProperty("drawer",dr);

在 QML 中，您可以触发如下功能：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ColumnLayout
    {
        anchors.centerIn: parent
        Rectangle
        {
            Layout.preferredWidth:  200
            Layout.preferredHeight:  100
            color: "red"
        }

        Button
        {
            Layout.preferredWidth:  100
            Layout.preferredHeight:  20
            Layout.alignment: Qt.AlignHCenter
            text: "test"
            onClicked: drawer.screenShot()
        }
    }
}

Answer 2

我正在寻找这个用例，您可以与我分享工作代码吗？