Kotlin/JS中如何实现带格式的剪贴板复制功能？

要在Kotlin多平台的Web端实现带格式复制，核心是通过Kotlin/JS的JS互操作能力，对应浏览器原生的ClipboardItem和Blob API，以下是完整实现方案：

步骤1：构造不同格式的Blob对象 #

浏览器要求剪贴板内容以Blob形式传递，我们需要分别创建HTML格式和纯文本格式的Blob：

import org.w3c.dom.Blob
import org.w3c.dom.BlobPropertyBag

// 定义带格式的内容和对应的纯文本降级内容
val formattedContent = "<h3>示例标题</h3><p>这是<b>带格式</b>的复制内容</p>"
val plainTextContent = "示例标题\n这是带格式的复制内容"

// 构造HTML格式Blob
val htmlBlob = Blob(
    arrayOf(formattedContent),
    BlobPropertyBag(type = "text/html")
)

// 构造纯文本格式Blob
val plainTextBlob = Blob(
    arrayOf(plainTextContent),
    BlobPropertyBag(type = "text/plain")
)

步骤2：创建ClipboardItem实例 #

由于Kotlin/JS目前没有为ClipboardItem提供强类型绑定，我们需要通过动态JS互操作来构造实例：

// 创建包含多格式Blob的动态对象
val clipboardData = js("{}")
clipboardData["text/html"] = htmlBlob
clipboardData["text/plain"] = plainTextBlob

// 构造ClipboardItem
val clipboardItem = js("new ClipboardItem(clipboardData)")

步骤3：写入剪贴板 #

调用浏览器的剪贴板API完成写入，注意该操作必须在用户交互（如点击事件）中触发，否则会被浏览器安全策略阻止：

import org.w3c.dom.navigator

// 用回调处理异步操作
fun copyFormattedContent() {
    navigator.clipboard.write(arrayOf(clipboardItem))
        .then { println("复制成功") }
        .catch { println("复制失败：${it.message}") }
}

// 或者用suspend函数处理（更符合Kotlin协程风格）
suspend fun copyFormattedContentCoroutine() {
    try {
        navigator.clipboard.write(arrayOf(clipboardItem))
        println("复制成功")
    } catch (e: Exception) {
        println("复制失败：${e.message}")
    }
}

完整绑定示例（点击触发） #

将复制逻辑绑定到按钮点击，确保符合浏览器安全要求：

import org.w3c.dom.HTMLButtonElement
import kotlin.browser.document

fun main() {
    val copyButton = document.getElementById("copy-btn") as HTMLButtonElement
    copyButton.onclick = {
        val formattedContent = "<h3>示例标题</h3><p>这是<b>带格式</b>的复制内容</p>"
        val plainTextContent = "示例标题\n这是带格式的复制内容"

        val htmlBlob = Blob(arrayOf(formattedContent), BlobPropertyBag(type = "text/html"))
        val plainTextBlob = Blob(arrayOf(plainTextContent), BlobPropertyBag(type = "text/plain"))

        val clipboardData = js("{}")
        clipboardData["text/html"] = htmlBlob
        clipboardData["text/plain"] = plainTextBlob
        val clipboardItem = js("new ClipboardItem(clipboardData)")

        navigator.clipboard.write(arrayOf(clipboardItem))
            .then { println("复制成功") }
            .catch { println("复制失败：${it.message}") }
    }
}

内容的提问来源于stack exchange，提问作者vahidreza