如何用自定义控件和快捷键，实现复制文本到剪贴板

如何用自定义控件和快捷键，实现复制文本到剪贴板原创

吴锐雄

2人赞赏了该文章 864次浏览编辑于2023年05月25日 16:22:18

关键词：自定义控件，快捷键，复制，剪贴板

一、需求

在苍穹页面上，光标选取文本之后，ctrl+c可以实现简单复制。

如果要做字符串拼接，或者以某些格式(例如json)把文本内容复制到客户端的剪贴板。ctrl+c无法满足需求。

二、思路与方案

苍穹是B/S架构，如果在服务端写插件代码，只能复制文本到服务端的剪贴板。

因此我们需要结合自定义控件，用JavaScript前端代码，让浏览器把内容复制到客户端操作系统的剪贴板。

案例的一些扩展思路

本案例仅介绍如何编写一个实现复制文本到剪贴板的功能。

如果想要在单据列表上使用复制剪贴板功能，需要新增动态表单页面，拖入单据列表控件、自定义控件，然后把新页面设置给列表模板。参考文章：https://vip.kingdee.com/link/s/lcsZq

三、实现过程

1.设计单据页面

拖入自定义控件。把自定义控件的高度宽度都调整为0，因为这是一个实现复制功能的自定义控件，不需要界面。

2.添加空操作

新增一个空操作，我将其命名为“复制单据信息”，操作类型是donothing，操作编码是copybill

绑定工具栏按钮

3.编写插件代码，监听操作触发

注意：此处代码只是简单做一个示例，简单地将单据信息转为json字符串。

开发者可以根据自己的业务需求组装字符串，调用CustomControl的setData方法将字符串传给自定义控件进行复制。

public class DemoTextLinePlugin extends AbstractBillPlugIn {

    @Override
    public void afterDoOperation(AfterDoOperationEventArgs afterDoOperationEventArgs) {
        super.afterDoOperation(afterDoOperationEventArgs);
        if (afterDoOperationEventArgs.getOperateKey().equals("copybill")) {
            copybill();
        }
    }

    private void copybill () {
        CustomControl customControl = getControl("kdec_custom_copy");
        String jsonString = saveSrcBill(getModel().getDataEntity());
        Map<String, Object> paramsMap = new HashMap<String, Object>();
        // 因为我的自定义控件里面用了clipconnent这个key，所以单据插件里面只能用clipconnent这个key
        paramsMap.put("clipconnent", jsonString);
        customControl.setData(paramsMap);
    }

}

注册插件

4.编写自定义控件

在自定义控件的update事件中调用以下方法，将入参文本复制到剪贴板。

这个自定义控件方案会在附件中给出。

     MyComponent.prototype = { // 内部函数不推荐修改
        _setModel: function(model) {
            this.model = model // 内部变量挂载
        },
        init: function(props) {
        },
        update: function(props) {
            copy_to_clipboard(this.model, props.data.clipconnent)
        },
        destoryed: function() {
        }
    }
    
    var copy_to_clipboard = function(model, clipconnent) {
        const dom = document.createElement("input");
        dom.value = clipconnent;
        document.body.appendChild(dom);
        dom.select();
        document.execCommand("copy");
        document.body.removeChild(dom);
    }