如何在Qt WebView中显示嵌入式html

我试图让QtWebView显示一个作为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>

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

test.html

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

你好
你好，世界！

结果就是一个空白的白色窗口。如果我使用常规url（

http://www.stackoverflow.com

）在qml文件中作为其工作的url-显示页面。如果我使用嵌入图像的名称（

qrc:/qt project.org/mac/cursors/images/pluscursor.png

），则会显示该图像

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

有人能告诉我我做错了什么吗？

Update：我已经验证了，如果我试图告诉Web视图从C++加载URL也是相同的。我还验证了资源确实是嵌入的——我可以使用QResource打开和读取资源。而且，这似乎不是Qt5所特有的：（某些人在Qt4.8上有类似的问题）。

为什么不直接使用它呢

url: "res/test.html"

而不是

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

?

---

然后，您就不需要使用任何资源文件了。首先，请确保资源文件在编译文件夹（一个

.RCC

文件或一个

qrc\ucpp

）上编译正确。
其次，确保文件路径正确（在我的例子中是

qrc:/images/resource/html/test.html

）。您可以打开QRC文件，右键单击html文件，然后单击

将资源路径复制到剪贴板

第三，注意一些URL需要更多的时间才能完全加载

最后，我测试了这个场景，它运行得非常好（使用Qt5.1.0）

---

祝您好运-S.M.Mousavi

只需使用文件路径&如果您将其保存在项目目录中，只需设置文件名即可 url:“/res/test.html”

&如果文件位于项目目录中

---

url:“test.html”

我不认为可以在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
}

---

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

然后，我不得不从参考资料中手动读取第一个html页面，并提供基本url。之后，作为资源嵌入的后续页面和资源将很好地加载

下面是有问题的代码：

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

---

这在Qt5.5.0中起作用。

您可以在QApplication a（argc，argv）之后的第行下放置

---

通过web引擎加载嵌入式资源URL的支持在最新的Qt中提供，至少对于QML中的

WebEngineView

。我找不到关于此的正式文档，但从参考资料中加载页面：

WebEngineView {

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

---

它也适用于我的

qt5.8.0

。

加载资源文件的最快方法是使用

XMLHttpRequest

和

loadHtml（）

。 这在Qt5.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();
        }
    }
}

---

您是否已将您创建的资源文件添加到您的.pro文件中？@Castilho:是的，并且我已验证该html文件实际上最终作为文件中的资源。使用您从读取嵌入资源的后端函数获得的内容设置html，可能是一个简单的答案（以防有人怀疑）我是否正确理解您的建议，即不要嵌入资源，而是将其作为磁盘上的文件保留在应用程序之外？如果qml文件来自资源本身，这必须起作用：）

WebEngineView {

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

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