如何在 Qt WebView 中显示嵌入的 html答案

【问题标题】：How to display embedded html in Qt WebView如何在 Qt WebView 中显示嵌入的 html
【发布时间】：2012-12-26 23:30:11
【问题描述】：

我试图让 Qt WebView 显示作为 Qt 资源嵌入的 html 文件，但我似乎无法让它工作。我创建了一个新的 Qt Quick 应用程序并添加了一个简单的 qml 文件：

import QtQuick 2.0
import QtWebKit 3.0

Rectangle {
    id: content
    width: 800
    height: 600
    color: "black"

    WebView {
        id: webView
        anchors.fill: parent
        url: "qrc:/res/test.html"
    }
}

然后我（使用设计器）创建了一个如下所示的资源文件：

<RCC>
    <qresource prefix="/res">
        <file>test.html</file>
    </qresource>
</RCC>

并创建了一个简单的 test.html 文件（与 .qrc 文件在同一目录中）：

<html>
<head><title>Hello</title></head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

结果只是一个空白的白色窗口。如果我在 qml 文件中使用常规 url (http://www.stackoverflow.com) 作为它工作的 url - 将显示页面。如果我使用嵌入图像的名称 (qrc:/qt-project.org/mac/cursors/images/pluscursor.png)，则会显示该图像。

在我看来确实添加了html文件（至少在我枚举嵌入式资源时列出），但是我对Qt资源系统的理解有限，所以我很可能误解了一些基本的东西。

谁能告诉我我做错了什么？

更新：如果我尝试告诉 Web 视图也从 C++ 加载 url，我已经验证了行为是相同的。我还验证了资源确实是嵌入的——我可以使用 QResource 打开和读取资源。此外，这似乎并不特定于 Qt5：http://qt-project.org/forums/viewthread/18181（有人与 Qt 4.8 有类似问题）。

【问题讨论】：

您是否已将您创建的资源文件添加到您的 .pro 文件中？
@Castilho：是的，我已经验证了 html 文件实际上最终作为文件中的资源。
用你得到的东西来设置 html，比如说，从读取嵌入式资源的后端函数，可能是一个简单的答案（以防有人想知道）

标签： qt qml embedded-resource qtwebkit qt5

【解决方案1】：

首先，确保资源文件在编译文件夹中正确编译（.RCC 文件或qrc_<Resource name>.cpp）
其次，确保您的文件路径正确（在我的情况下为qrc:/images/resource/html/test.html）。您可以打开QRC文件并右键单击html文件，然后单击Copy Resource Path to Clipboard。
第三，请注意，有些 url 需要更多时间才能完全加载。

最后，我测试了这个场景，效果很好（使用 Qt 5.1.0）

祝你好运 - S.M.穆萨维

【讨论】：

【解决方案2】：

我不认为可以直接在 WebView 中从 qrc 打开资源（我已经尝试了所有 url 变体）。我现在正在做的是将文件复制到本地临时目录然后打开。

QString helpHTMLFile = QStandardPaths::writableLocation(QStandardPaths::TempLocation);
helpHTMLFile.append(QDir::separator());
helpHTMLFile.append("software_manual.html");
QFile(helpHTMLFile).remove();
QFile(":/software_manual.html").copy(helpHTMLFile);

QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("pathToFile", "file:///"+helpHTMLFile);

那么 QML 看起来像：

WebView {
         anchors.fill: parent
         url: pathToFile
}

【讨论】：

【解决方案3】：

好的，这就是我最终解决此问题的方法。我最终使用了一个普通的小部件而不是基于 qml 的界面。

然后我必须手动从资源中读取第一个 html 页面并提供基本 url。之后，作为资源嵌入的后续页面和资源可以正常加载。

这是有问题的代码：

QResource res(":/html/index.html");
ui->webView->setHtml(reinterpret_cast<const char *>(res.data()), QUrl("qrc:/html/"));

其中webView 是QWebView。我的 .qrc 文件如下所示：

<RCC>
    <qresource prefix="/">
        <file>html/index.html</file>
    </qresource>
</RCC>

这适用于 Qt 5.5.0。

【讨论】：

【解决方案4】：

加载资源文件的最快方法是使用XMLHttpRequest 和loadHtml()。这适用于移动平台的 Qt 5.10.1。

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtWebView 1.1

Page {
    anchors.fill: parent

    WebView {
        id: webView
        anchors.fill: parent

        Component.onCompleted: {

            var resource = 'qrc:/path/to/your/resource.html';

            var xhr = new XMLHttpRequest;
            xhr.open('GET', resource);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    var response = xhr.responseText;
                    webView.loadHtml(response);
                }
            };
            xhr.send();
        }
    }
}

【讨论】：

我可以这样加载Html吗？ webView: loadHtml("
test
")

【解决方案5】：

为什么不直接使用

url: "res/test.html"

而不是

url: "qrc:/res/test.html"

?

那么你就不需要使用任何资源文件了

【讨论】：

我是否理解正确，您建议不要嵌入资源，而是将其作为磁盘上的文件留在应用程序之外？
如果 qml 文件来自资源本身，这必须工作:)

【解决方案6】：

Web 引擎支持的嵌入式资源 URL 加载支持在最新的 Qt 中至少适用于 QML 中的WebEngineView。我无法找到有关此的官方文档，但 one official sample 从资源加载页面：

WebEngineView {

    url: "qrc:/index.html"
...
}

Qt 5.8.0 也适用于我。

【讨论】：

【解决方案7】：

你可以在 QApplication a(argc, argv); 后面加上下面一行

QtWebView::initialize();

【讨论】：

【解决方案8】：

只需使用 Path-To-File & 如果您将其保存在项目目录中，只需设置文件名网址：“/res/test.html”

& 如果文件在项目目录中网址：“test.html”

【讨论】：