QML—-Webengineview点击网页上的下载没反应,下载文件

问题

使用webe加载网页时,点击下载页面会没有反应。原因就是它默认是关闭下载功能

解决

需要在profile里监听下载事件打开onDownloadRequested,当有下载时会触发这个信号,会获取到一个WebEngineDownloadItem这是下载的东西,查询它的一些相关参数,可以修改路径和开始下载

import QtQuick 2.15
import QtQuick.Window 2.15
import QtWebEngine 1.9
import Qt.labs.platform 1.1
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    property var savePath: "";
    WebEngineView{
        id:webview
        anchors.fill:parent;
        url:"https://www.kuwo.cn/down"

        // 使用 WebEngineProfile 来监听下载事件
        profile: WebEngineProfile {
            id:webprofile

            onDownloadRequested: function(downloadItem) {
                //当触发下载时,onDownloadRequested 事件会被调用,接收 WebEngineDownloadItem 对象来管理下载过程。
                console.log("Download requested: ", downloadItem.url)
                // 使用 FileDialog 让用户选择文件路径
                // folderDialog.open();

                //设置下载路径,会获取电脑标准的下载路径进行拼接
                var customSavePath = StandardPaths.writableLocation(StandardPaths.DownloadLocation).toString().replace("file:///", "");;
                savePath = customSavePath;
                console.log("Custom save path: ", customSavePath);
                console.log("downloadDirectory path: ", downloadItem.downloadDirectory);
                downloadItem.downloadDirectory = customSavePath;
                console.log("downloadDirectory path: ", downloadItem.downloadDirectory);
                downloadItem.accept();
            }

            onDownloadFinished: function(downloadItem){
                if(downloadItem.state === WebEngineDownloadItem.DownloadCompleted){
                    console.log("下载成功 ");
                    dialogText.text = "下载成功,地址为:" + savePath;
                    downloadCompleteDialog.open();
                }
                else if(downloadItem.state === WebEngineDownloadItem.DownloadCancelled){
                    console.log("下载失败");
                }
            }
        }
    }
    Dialog {
        id: downloadCompleteDialog;
        title: "下载通知";
        standardButtons: Dialog.Ok;
        anchors.centerIn: parent;
        property var downloadItem: null;
        onAccepted: {
            console.log("Dialog accepted");
        }
        onRejected: {
            console.log("Dialog closed");
        }

        Text {
            id: dialogText;
            anchors.margins: 10;
            anchors.fill: parent;
            text: "下载信息将在这里显示";
        }
    }

}

这样修改完成后,就能够进行下载

file

使用选择文件夹的方式下载

qml中的filedialog无法卡住程序因此无法使用,dowmITemonDownloadRequested这个信号中如果不调用accept就会销毁,外边也无法拿到,我们需要使用c++类的方式.
新建一个c++类SelectDownloadFolder
.h 把拿到文件夹的函数暴露给qml

#ifndef SELECTDOWNLOADFOLDER_H
#define SELECTDOWNLOADFOLDER_H

#include <QObject>
#include <QFileDialog>
#include <QString>

class SelectDownloadFolder : public QObject
{
    Q_OBJECT
public:
    explicit SelectDownloadFolder(QObject *parent = nullptr);

    Q_INVOKABLE QString getSelectDownloadFolder();
signals:
};

#endif // SELECTDOWNLOADFOLDER_H

.cpp 使用c++的filedialog来打开文件夹卡住程序

#include "selectdownloadfolder.h"

SelectDownloadFolder::SelectDownloadFolder(QObject *parent)
    : QObject{parent}
{}

QString SelectDownloadFolder::getSelectDownloadFolder()
{
    QString savepath = QFileDialog::getExistingDirectory(
        nullptr,
        QString(" 选择文件夹 "),
        QString(),
        QFileDialog::ShowDirsOnly | QFileDialog::DontResolveSymlinks
        );
    return savepath;
}

写完类后需要注册这个c++给qml
main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "selectdownloadfolder.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    // 注册类并创建实例
    qmlRegisterType<SelectDownloadFolder>("com.mycompany", 1, 0, "SelectDownloadFolder");

    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreated,
        &app,
        [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        },
        Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

然后就可以在qml中调用,这样我们就可以拿到选择的路径,在路径选择完之后才会开始下载.

import com.mycompany 1.0

SelectDownloadFolder{
        id:selectedfolder
    }

savePath = selectedfolder.getSelectDownloadFolder();

file

优化后的版本,qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtWebEngine 1.9
import Qt.labs.platform 1.1
import com.mycompany 1.0

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

    SelectDownloadFolder{
        id:selectedfolder
    }

    WebEngineView{
        id:webview
        anchors.fill:parent;
        url:"https://www.kuwo.cn/down"

        // 使用 WebEngineProfile 来监听下载事件
        profile: WebEngineProfile {
            id:webprofile
            onDownloadRequested: function(downloadItem,downloadPath = selectedfolder.getSelectDownloadFolder()) {
                //当触发下载时,onDownloadRequested 事件会被调用,接收 WebEngineDownloadItem 对象来管理下载过程。
                //使用电脑标准的下载路径进行拼接
                //var standardSavePath = StandardPaths.writableLocation(StandardPaths.DownloadLocation).toString().replace("file:///", "");
                //使用文件夹的方式获取路径
                // strSelectedDownloadPath = selectedfolder.getSelectDownloadFolder();
                if (downloadPath === "")
                {
                    //用户点击取消,返回空路径,取消下载
                    downloadItem.cancel();
                }
                else
                {
                    //修改文件的下载路径,开始下载
                    downloadItem. downloadDirectory = downloadPath
                    console.log("downloadItem. downloadDirectory",downloadItem. downloadDirectory);
                    console.log("downloadPath",downloadPath);
                    downloadItem.accept();
                }
            }

            onDownloadFinished: function(downloadItem){
                if(downloadItem.state === WebEngineDownloadItem.DownloadCompleted){
                    console.log("下载成功 ");
                }
                else if(downloadItem.state === WebEngineDownloadItem.DownloadCancelled){
                    console.log("下载失败");
                }
            }
        }
    }

}
如果觉得本文对您有所帮助,可以支持下博主,—分也是缘。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇