qt - 在 QML WebView 中查看 PDF

Question

我想在我的 QML 代码中创建的 WebView 中查看 PDF 文件。我正在导入 QtWebView 1.1 并将 url 属性设置为 PDF 文件的路径，但收到此错误:

[13044:12820:0314/144814.854:ERROR:in_progress_cache_impl.cc(192)] Cache is not initialized, cannot RetrieveEntry. [13044:12820:0314/144814.854:ERROR:in_progress_cache_impl.cc(176)] Cache is not initialized, cannot AddOrReplaceEntry. [13044:12820:0314/144814.854:ERROR:in_progress_cache_impl.cc(192)] Cache is not initialized, cannot RetrieveEntry.

当我使用相同的代码查看图像时，它可以工作。本问题:Display PDF file with QWebView接近我想要的，但 QML 似乎没有让我像 C++ 那样访问设置方法( WebView docs )。还有其他方法可以做到这一点吗？

Answer 1

看来你混淆了元素，QWebView属于QtWebkit(使用Webkit)，它在Qt中不再存在，并被Qt WebEngine(使用chromium)取代。另外，Qt WebView 的 WebView 使用原生 API(例如 Android 不支持 Qt WebEngine，但支持 WebView)。

Qt WebEngine 和 Qt WebView 本身不支持 PDF 可视化(Qt WenEngine 很快就会支持它)，因此解决方案是使用一些 js 库来实现 PDF.js这就是我在 old answer 基础上提出的替代方案.

*.pro

QT += quick webview
CONFIG += c++11
SOURCES += main.cpp
RESOURCES += qml.qrc

COPY_CONFIG = 3rdParty example.pdf
copy_cmd.input = COPY_CONFIG
copy_cmd.output = ${QMAKE_FILE_IN_BASE}${QMAKE_FILE_EXT}
copy_cmd.commands = $$QMAKE_COPY_DIR ${QMAKE_FILE_IN} ${QMAKE_FILE_OUT}
copy_cmd.CONFIG += no_link_no_clean
copy_cmd.variable_out = PRE_TARGETDEPS
QMAKE_EXTRA_COMPILERS += copy_cmd

ma​​in.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QtWebView>

class PDFJS: public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString version READ version WRITE setVersion NOTIFY versionChanged)
    QString m_version;
public:
    QString version() const{
        return m_version;
    }
    void setVersion(QString version){
        if (m_version == version)
            return;
        m_version = version;
        Q_EMIT versionChanged(m_version);
    }
    Q_SIGNAL  void versionChanged(QString version);
    Q_INVOKABLE QUrl getUrl(const QUrl & path){
        QString pdfjs_path = QDir::current().filePath(QString("3rdParty/pdfjs-%1-dist/web/viewer.html").arg(m_version));
        QUrl pdf_url = QUrl::fromLocalFile(pdfjs_path);
        QUrlQuery query;
        query.addQueryItem("file", path.toString());
        pdf_url.setQuery(query);
        return pdf_url;
    }
};

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QtWebView::initialize();
    QQmlApplicationEngine engine;
    PDFJS pdfjs;
    engine.rootContext()->setContextProperty("applicationDirPath", QGuiApplication::applicationDirPath());
    engine.rootContext()->setContextProperty("PDFJS", &pdfjs);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}
#include "main.moc"

ma​​in.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtWebView 1.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("PDFJS Example")
    WebView{
        id: webview
        anchors.fill: parent
    }
    Component.onCompleted:{
        PDFJS.version = "2.1.266"
        webview.url = PDFJS.getUrl("file://" + applicationDirPath + "/example.pdf")
    }
}

您可以找到完整的项目here

更新:仅 QML

.
|-- 3rdParty
|   `-- pdfjs-2.1.266-dist
|-- example.pdf
`-- main.qml

ma​​in.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtWebView 1.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("PDFJS Example")
    WebView{
        id: webview
        anchors.fill: parent
    }
    Component.onCompleted:{
        var pdfjs_path = Qt.resolvedUrl("3rdParty/pdfjs-2.1.266-dist/web/viewer.html")
        var path = Qt.resolvedUrl("example.pdf");
        var url = pdfjs_path + "?file=%1".arg(path)
        console.log(url)
        webview.url = url
    }
}

---

_{这部分项目你找到here}