使用 FireFox 中的 Vaadin 按钮复制到剪贴板

Question

这是 Vaadin 按钮的代码：

String textToCopy = "COPY ME!!!";
Button copyBtn = new Button("");
copyBtn.setButtonLayout(false, new IconSelf(VaadinIcon.COPY_O), "Copy"));
copyBtn.addClickListener(event -> {
          getUI().get().getPage().executeJs("navigator.clipboard.writeText(`" + textToCopy + "`);");
    Notification.show(getTranslation(PAGESTRING + "attributestoclipboard"))
});

为了复制我的自定义文本，我使用了 navigator.clipboard.writeText(...)。
适用于 Chrome 和 Edge 但 不适用于 Firefox.
当我在 executeJS(...) 函数中使用它时，Firefox 也阻止了 document.execCommand("copy")。

我想我需要给按钮添加一个 onClick 功能。我如何使用 Vaadin 执行此操作？

Answer 1

copyBtn.getElement().executeJs("this.addEventListener('click', e => navigator.clipboard.writeText([=10=]))", textToCopy);

请注意，强烈建议不要使用字符串连接来动态构建传递给 executeJs 的字符串，因为存在跨站点脚本漏洞的风险。这就是为什么我的建议也使用 [=12=] 来引用单独传递的字符串。这类似于使用 SQL.

的准备语句

使用 FireFox 中的 Vaadin 按钮复制到剪贴板

Copy to clipboard with Vaadin button in FireFox

javascript

clipboard

firefox

vaadin