【JS】点击文本复制到剪贴板实现

【引言】

在前两周完善了一些关于与ERP对接项目日志方面的功能，对于与第三方系统对接的系统来说，记录每一次接口调用的参数返回结果是极其重要的，日志记录越完善，越有利于以后查问题。

日志记录没有用什么框架，就是单纯的有个接口日志表，每个接口调用都会记录这一次调用的参数，请求地址，返回结果等信息。而为了方便以后运营或相关人员可以自己登录系统查到调用的日志记录，完善了系统页面功能。

下面是系统接口日志查询页面：

这样一个页面，我们可以通过订单号/退货单号等关键字信息搜索到相关的接口调用日志，查看结果是怎样的。而页面的展示是有限的，这样一来，结果内容过长，还是不知道结果是什么。

想到之前会从网页上搜索相关maven jar包的引用，只需要鼠标一点击到对应的文本框内容，整个引用就直接复制到剪切板，直接ctrl + v 粘贴到项目中即可。这点是让我印象很深刻的一个体验。

所以，找前端给我写了个这样的功能，只要鼠标点击到某条记录对应的参数或结果，就可以将内容复制到剪切板，从而可以直接粘贴到json在线解析工具中解析，结果一目了然。

【实现】

前端用的vue，看了看代码，如此强大好用的功能，代码其实很简单，如下：

// 页面渲染，点击调用复制方法
return h('div', [
     h('span', {
         style: {
             display: 'inline-block',
             width: '100%',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap'
         },
         domProps: {
             title: params.row.result
         },
         on: {
             click: (e) => {
                 this.copyToClipboard(params.row.result);
                 this.$Message.success('复制成功！');
             }
         }
     }, params.row.result)
 ])

// js 点击复制到剪贴板函数
copyToClipboard(s){
    if(window.clipboardData){
         window.clipboardData.setData('text',s);
     }else{
         (function(s){
             document.oncopy=function(e){
                 e.clipboardData.setData('text',s);
                 e.preventDefault();
                 document.oncopy=null;
             }
         })(s);
         document.execCommand('Copy');
     }
 }

【总结】

1. 用户的体验是很重要的。开发的时候，多想一点，多做一点，对自己也是一种提升。

2. 这一功能的实现，是自己要求前端给我加上的。从结果来看，既减少了自己的工作量，又得到了老大的肯定，双赢的效果。