将excel数据复制到页面上

说在前面

在前端开发过程中，有的时候我们会希望可以直接将excel上的数据复制粘贴到页面上的表格中，所以也就有了这一篇博客。

效果

思路

我们可以监听页面的paste事件，监听到paste事件的时候可以读取剪切板的数据，获取到的是一串字符串，我们需要将其转换成我们想要的格式，如Array，转换为数组。

上图为获取剪切板数据打印的数据（console.log(val)），这样我们可以看出字符串还保留着excel表格的格式。

上图为剪切板数据分隔后的结果（console.log(val.split(""))），我们可以发现’\t’代表一个制表符，’\r\n’代表的是一个换行符，到了这里，我们就不难处理了吧。

注意

前面我们分析到了’\r\n’代表一个换行符，但其实这里有一个坑：

• \n是换行，英文是New line
• \r是回车，英文是Carriage return

机械打字机有回车和换行两个键作用分别是:

换行就是把滚筒卷一格，不改变水平位置 。

回车就是把水平位置复位，不卷动滚筒 。

Enter = 回车+换行(\r\n) 注:\r\n连用时,不能调换顺序

• unix换行：\n(0x0A)
• MAC回车：\r(0x0D)
• WIN回车换行：\r\n(0x0D,0x0A)
  换行符其实有三种不同的表示，所以我们要兼容一下这三种情况，我们可以这样处理val = val.replace(/\r\n|\r/g, "\n");现将\r\n和\r都转成\n，这样换行符就只剩下\n了。

代码

document.addEventListener("paste", function() {
    if (event.clipboardData || event.originalEvent) {
      var clipboardData = event.clipboardData || window.clipboardData;
      var val = clipboardData.getData("text");
      console.log(val);
      console.log(val.split(""));
      val = val.replace(/\r\n|\r/g, "\n");
      let str = val.split("\n");
      let arr = new Array(str.length - 1);
      for (let i = 0; i < str.length - 1; i++) {
        let temp = str[i].split("\t");
        arr[i] = temp;
      }
      console.log(arr);
      event.preventDefault();
    }
  });