如何检测HTML剪贴板复制成功？解决安卓Chrome无报错失败问题

问题背景 #

纯文本剪贴板写入在多数浏览器中可正常运行：

navigator.clipboard.writeText(text).then(() => {
    console.log("Copied.");
}).catch(err => {
    console.log("Error.");
});

但以下HTML剪贴板写入代码在安卓Chrome中无法正常工作，且不会抛出错误：

navigator.permissions.query({name: "clipboard-write"}).then((result) => {
    if (result.state === "granted" || result.state === "prompt") {
        const blobInput = new Blob([exportContent], {type: "text/html"});
        const clipboardItemInput = new ClipboardItem({"text/html" : blobInput});                        

        navigator.clipboard.write([clipboardItemInput]).then(() => {
            console.log("Copied");
        }).catch(err => {
            console.log("Error.");
        });
    }
    else {
        console.log("Permission denied.");
    }   
});

替代写法尝试 #

同时写入多格式内容 #

部分安卓应用或输入法（如GBoard）优先读取纯文本格式，同时提供text/plain和text/html两种格式的内容，既能保证HTML内容可被支持的应用读取，也能避免剪贴板为空：

navigator.permissions.query({name: "clipboard-write"}).then((result) => {
    if (result.state === "granted" || result.state === "prompt") {
        // 准备HTML和对应的纯文本内容
        const htmlBlob = new Blob([exportContent], {type: "text/html"});
        // 可将HTML转换为纯文本，或直接使用预设的纯文本内容
        const plainTextBlob = new Blob([extractPlainTextFromHtml(exportContent)], {type: "text/plain"});
        
        const clipboardItem = new ClipboardItem({
            "text/html": htmlBlob,
            "text/plain": plainTextBlob
        });                        

        navigator.clipboard.write([clipboardItem]).then(() => {
            console.log("Copied");
        }).catch(err => {
            console.log("Error:", err);
        });
    } else {
        console.log("Permission denied.");
    }   
});

复制失败检测方案 #

由于安卓Chrome中navigator.clipboard.write不会抛出错误，可尝试写入后立即读取剪贴板验证内容，但此方法需要clipboard-read权限，且可能被用户拒绝：

navigator.clipboard.write([clipboardItemInput]).then(async () => {
    console.log("Write operation completed");
    try {
        const clipboardItems = await navigator.clipboard.read();
        let htmlContentValid = false;
        
        for (const item of clipboardItems) {
            if (item.types.includes("text/html")) {
                const blob = await item.getType("text/html");
                const content = await blob.text();
                if (content.trim() === exportContent.trim()) {
                    htmlContentValid = true;
                    break;
                }
            }
        }

        if (!htmlContentValid) {
            console.log("HTML content not accessible in clipboard");
            // 触发用户提示逻辑
        }
    } catch (readErr) {
        console.log("Failed to verify clipboard content:", readErr);
    }
}).catch(err => {
    console.log("Write error:", err);
});

实用临时解决方案 #

若上述方法无法解决问题，可采用以下无需设备检测、兼容未来修复的方案：

• 先向剪贴板写入纯文本提示："[应用名称]已向剪贴板发送HTML内容。若粘贴的是此信息，说明您的设备无法处理HTML剪贴板内容……[建议用户通过附件形式分享内容作为替代方案]"
• 尝试写入HTML内容

当HTML写入成功时，用户粘贴会优先获取HTML内容；若写入失败或无法读取，用户会看到提示信息，明确问题及替代方案。

最终验证结论 #

经测试，HTML内容实际已写入剪贴板，但无法被稳定访问：

• 安卓版Gmail中仅约20%概率能通过上下文菜单成功粘贴HTML内容
• Gboard等输入法始终仅显示纯文本内容

上述临时方案可有效避免用户困惑，且无需针对特定设备编写适配代码，谷歌修复该问题后可自动恢复正常流程。

内容的提问来源于stack exchange，提问作者Alan M.