複製失效問題

問題描述

在Qt 6.2.3中使用QWebEngineView嵌套網頁時，通過JavaScript的navigator.clipboard.write()複製圖片無響應，控制枱報錯：

Uncaught TypeError: navigator.clipboard.write is not a function

根本原因

1. 安全上下文限制
   clipboard.write() API 要求頁面必須在安全上下文中運行（HTTPS 或 localhost）
2. 權限未開啓
   Qt WebEngine 默認禁用剪貼板訪問權限

完整解決方案

1. 確保安全上下文

// 方法1: 加載本地頁面（自動視為安全上下文）
view->load(QUrl("file:///path/to/page.html"));

// 方法2: 使用HTTPS（推薦在線部署）
view->load(QUrl("https://your-domain.com/page.html"));

// 方法3: 強制開發環境（調試用，生產環境慎用）
qputenv("QTWEBENGINE_CHROMIUM_FLAGS", "--unsafely-treat-insecure-origin-as-secure=http://your-insecure-site.com");

2. 啓用剪貼板權限

// 在QWebEngineView初始化時添加
QWebEngineView *view = new QWebEngineView(parent);

// 關鍵設置：啓用剪貼板訪問
view->page()->settings()->setAttribute(
    QWebEngineSettings::JavascriptCanAccessClipboard,  // 權限標識
    true                                               // 啓用
);

3. 前端代碼示例

async function copyImageToClipboard(dataURL: string) {
    try {
        // 特性檢測
        if (!navigator.clipboard || !window.ClipboardItem) {
            throw new Error("當前不支持剪貼板API,請聯繫管理員!");
        }

        // 權限檢查
        const {state} = await navigator.permissions.query({
            name: "clipboard-write" as PermissionName
        });

        if (state === "denied") {
            throw new Error("剪貼板寫入權限被拒絕,請聯繫管理員!");
        }

        // 轉換圖片數據
        const blob = await fetch(dataURL).then(res => res.blob());

        // 執行復制操作
        await navigator.clipboard.write([
            new ClipboardItem({
                [blob.type]: blob
            })
        ]);

        return {success: true, msg: "複製成功"};
    } catch (error) {
        const _error = error as { message: string };
        return {success: false, msg: _error.message};
    }
}

關鍵配置説明

最終效果

正確配置後：

1. HTTPS/localhost頁面中clipboard.write()可用
2. 用户點擊按鈕時可複製圖片到剪貼板
3. 無控制枱權限報錯

下載問題

問題描述

使用a標籤模擬下載,頁面無反應

根本原因

這個請求會被qt攔截,默認是cancel

解決方案

QT代碼

auto* profile = view->page()->profile();
 connect(profile, &QWebEngineProfile::downloadRequested, this, [this](QWebEngineDownloadRequest* download) {
        // 獲取默認文件名和路徑
        QString defaultPath = QDir(download->downloadDirectory()).filePath(download->downloadFileName());

        // 彈出文件保存對話框
        QString savePath = QFileDialog::getSaveFileName(this,
                                                        tr("Save File"),     // 對話框標題
                                                        defaultPath,         // 默認路徑+文件名
                                                        tr("All Files (*)")  // 過濾器
        );

        if (!savePath.isEmpty()) {
            // 用户選擇了路徑：設置下載路徑並接受請求
            download->setDownloadDirectory(QFileInfo(savePath).absolutePath());
            download->setDownloadFileName(QFileInfo(savePath).fileName());
            download->accept();
        } else {
            // 用户取消對話框：取消下載
            download->cancel();
        }
    });

前端代碼示例

async function downloadImage(dataURL: string, fileName: string = "file") {
    const link = document.createElement("a");
    link.download = `${fileName}.png`;
    link.href = dataURL;
    link.click();
}