「Offer 驾到，掘友接招！我正在参与2022春招系列活动-经验复盘，点击查看活动详情」

前言

时间过得很快，一不注意就到了三月份了，不经问时间都去哪儿了？恰时赏花游玩之际，又是金三银四之期，所以时间都用在了赏花备面上去了，就没有继续更文了，简历投了字节和鹅厂，感觉沉海了，迟迟没有消息，想进大厂也真是太艰难了，哎(︶︿︶)，慢慢等消息吧。

今天在闲暇之余来总结一下在近期开发工作中遇到的一个关于copy-to-clipboard粘贴复制插件的问题，借由这个问题讲述如何在Github上给别人的代码仓库提交代码合并请求的的流程。

背景

在项目开发中，我们有很多需要复制的功能需求，再加上我们的技术栈是React，所以我们选用了npm上的react-copy-to-clipboard插件解决复制文本的需求。该插件在我们的很多项目中都在使用，而且也都均已上线，并且没有任何使用问题反馈。

但是最近新接到的需求：那就是在开发的一个表格展示需求时，文本在表格中是多行显示的，需要对文本进行复制，然后粘贴到txt和excel文档中也需要保留换行效果。(+_+)? ？？之前复制的基本都是单行文本，没有多行文本的情况，故觉得应该也没啥问题，无非就是在组装数据的时候将数据使用join('\r\n')处理然后套用插件使用就可以，来吧，so easy！

事实却是当一切都准备就绪时，将复制的文本粘贴到txt文档时，没问题，嗨呀，真香！接着信心满满的到excel文档一贴，哎呀，怎么成一行了？糟糕翻车了。。。咋回事呢，那就等我娓娓道来→

微信截图_20220310144249.png

问题和方法

为什么在excel中就不能换行显示呢？带着疑问我去看了react-copy-to-clipboard插件的源码，发现它其实是对copy-to-clipboard的二次封装，其核心还是copy-to-clipboard里面的copy()的方法里面创建元素时使用的是标签，如下图所示：

微信截图_20220310152434.png

正是由于是标签，而标签本身是将\r过滤掉了，只识别\n，所以导致在excel里面粘贴内容时显示为一行了。问题既然找到了，那如何修改才能让其在excel也能换行显示呢？答案就是使用<pre>标签，<div>、标签都不能实现换行。

那就来说说为什么<pre>标签就能实现在excel里面换行呢？来看看MDN上的解释：<pre>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。通俗来说，就是它能保留原有的样式。

通过Can I use来看看<pre>标签在各浏览器上的兼容性，如下图所示：

微信截图_20220310160140.png

可以看到它的兼容性还是挺友好的，所以这就让我萌生出是不是要给copy-to-clipboard插件仓库提合并代码请求，以满足在excel中的显示问题了。

一、如何提请PR？

其实给别人插件仓库发起PR请求还是多开心的一个事情，至少证明你有发现问题的慧眼，哈哈哈。提了PR别人给你合了固然值得欣喜，因为那是你为其做了贡献的证明。若没有合并，那也是一次尝试，没必要灰心，工作中看看还有没有其他最优的解，后续再为其提请便是。

下面就说说在Github上怎么提请PR的具体流程，这里就以copy-to-clipboard插件为例介绍，如下：

1、fork项目

首先想给开源插件提PR，那就必须要有它们的库，那就得在github上搜索copy-to-clipboard，先把它找到，找到之后就好办了。

微信截图_20220310195806.png

然后点击fork，把项目fork到自己的仓库：

微信截图_20220310162922.png

回到自己的仓库，就可以看到已经fork好的copy-to-clipboard库了。

微信截图_20220310200237.png

2、clone项目

微信截图_20220310163047.png

然后在本地将自己仓库的copy-to-clipboard克隆下来，克隆项目的git代码请参考上一篇文章（建议收藏）快来看看最值得拥有且最详细的Git使用教程

3、修改代码

当把项目克隆下来之后，建议新建一个分支，然后在新建的分支上更改代码之后在合并到自己仓库的master分支，这样才是合理规范的代码管理方式。在这次提请的PR中我就是新建了一个dev分支，即开发分支，然后提交之后再合并的，这样就避免污染到master分支。

微信截图_20220310201316.png

然后修改代码，找到主文件夹下的index.js，然后对下面截图中代码做如下调整，即将标签替换为<pre>，并为其加上注释。

微信截图_20220310201133.png

修改完之后，先在自己本地进行测试，没有问题就提交代码，提交代码时不要使用git add .命令，这样会为分支带入一些隐藏文件，建议使用git add index.js，这样就只会提交修改的index.js文件而不带入其他隐藏的文件。

上面的提交只改变了dev分支，然后将dev分支合并到master分支即可，这一part就完成了。

4、提交PR

当把代码修改了，也提交了之后，当在进入自己的copy-to-clipboard仓库，就会是如下界面。

微信截图_20220310181309.png

因为github发现有文件被更改，需不需要提请PR。这时只需要点击Caompare & pull request就能进入提请PR的页面。

微信截图_20220310181417.png

上图红色的框表示都是需要进行选择和填写的地方。合并时需要选对合并的分支，如果分支选不对别人就有可能不会给你合并。这里看到的截图是由于我之前已经提请了PR，然后这里使用dev分支进行演示，故选择时一定要选对分支。之后就是填写此次合并的标题和描述，完了之后就点击Create pull request按钮就好了。

5、查看记录

当创建了PR请求之后，可以在仓库的pull request中看到自己提请的PR请求。

微信截图_20220310183526.png

可以看到，这次我们标题是修复：替换标签为了复制到excel时保持换行。

6、修改信息

在填写信息时有可能没有表达清楚或者用词不当，这都是可以更改的，只有已选择的分支不可以更改。

微信截图_20220310183626.png

上图就是正式提请的PR信息截图，右上角的Edit可以更改此次合并的标题，中间的内容就是可以修改之前填写的描述。可以看到我写的描述就是：替换标签为<pre>标签，为了在复制粘贴文本到excel时保持换行。

到这里，如何提请PR的流程就介绍完毕了，到这里就等着开源库的作者给你合并了。

二、解决办法？

上面提请的PR请求还在等待中，但是我们工作中不能一直等着别人合并之后才去解决问题，问题已经发生也在那里摆着，该解决的该处理的我们还是要去解决，那如何解决呢？万一别人不合并PR，我们就不解决问题了？那当然不可能发生噻，那就自己动手写一个简单实用的复制文本的方法吧。代码如下：

import {message} from 'antd';

/**
 * 粘贴
 */
const copy = (text: string) => {
    let textarea = document.createElement('textarea');
    document.body.appendChild(input);
    textarea.value = text;
    textarea.select();
    document.execCommand('copy');
    message.success('复制成功！');
    textarea.remove();
}

注意：复制时要想保留换行，须使用textarea，input是不会保留换行的

上述代码就是简单的可复制文本的方法，虽然没有别人写的那么精致全面，但也足以满足实际开发工作中的复制文本需求了。麻雀虽小五脏俱全说的就是这个方法，如果你还不会的话可以参考上述代码，其实react-copy-to-clipboard插件的核心也就是这几句代码，如果你看过它源码就知道它其他的代码是处理样式和一些错误情况的处理方法，最根本的代码也就是上面展示的代码而已。既然代码都给出了，如果你正遇到复制文本的需求，你不妨参考过去使用一下^_^

至此，这篇文章要聊的所有内容也就没有了，如果你耐心的看完这篇文章你至少能收获到以后在用react-copy-to-clipboard插件复制内容到excel并换行显示的需求时，你知道如何解决这个问题；其次，就是你知道以后如何向别人的插件仓库提请PR请求。

最后，xdm看文至此，点个赞👍再走哦，3Q^_^

往期精彩文章

后语

伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

聊聊前端如何实现复制粘贴功能及Github上提请代码PR的具体流程？

前言

背景