复制excel数据到网页表格上

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

说在前面

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

效果

image.png

image.png

思路

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

image.png

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

image.png
上图为剪切板数据分隔后的结果(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();
    }
  });
目录
相关文章
|
5月前
|
Python
如何根据Excel某列数据为依据分成一个新的工作表
在处理Excel数据时,我们常需要根据列值将数据分到不同的工作表或文件中。本文通过Python和VBA两种方法实现该操作:使用Python的`pandas`库按年级拆分为多个文件,再通过VBA宏按班级生成新的工作表,帮助高效整理复杂数据。
|
5月前
|
数据采集 数据可视化 数据挖掘
用 Excel+Power Query 做电商数据分析:从 “每天加班整理数据” 到 “一键生成报表” 的配置教程
在电商运营中,数据是增长的关键驱动力。然而,传统的手工数据处理方式效率低下,耗费大量时间且易出错。本文介绍如何利用 Excel 中的 Power Query 工具,自动化完成电商数据的采集、清洗与分析,大幅提升数据处理效率。通过某美妆电商的实战案例,详细拆解从多平台数据整合到可视化报表生成的全流程,帮助电商从业者摆脱繁琐操作,聚焦业务增长,实现数据驱动的高效运营。
|
7月前
|
存储 安全 大数据
网安工程师必看!AiPy解决fscan扫描数据整理难题—多种信息快速分拣+Excel结构化存储方案
作为一名安全测试工程师,分析fscan扫描结果曾是繁琐的手动活:从海量日志中提取开放端口、漏洞信息和主机数据,耗时又易错。但现在,借助AiPy开发的GUI解析工具,只需喝杯奶茶的时间,即可将[PORT]、[SERVICE]、[VULN]、[HOST]等关键信息智能分类,并生成三份清晰的Excel报表。告别手动整理,大幅提升效率!在安全行业,工具党正碾压手动党。掌握AiPy,把时间留给真正的攻防实战!官网链接:https://www.aipyaipy.com,解锁更多用法!
|
4月前
|
移动开发 JavaScript
(H5查看CAD)网页CAD提取图纸表格到excel
本文介绍如何通过自定义MxCAD插件,在Web端智能识别CAD图纸中的表格,实现自动合并与高效导出至Excel,提升数据提取效率与准确性。内容涵盖区域选择、图形识别、表格结构重建、单元格合并及内容导出等关键技术,适用于工程图纸数据自动化处理场景。
|
数据采集 数据可视化 数据挖掘
利用Python自动化处理Excel数据:从基础到进阶####
本文旨在为读者提供一个全面的指南,通过Python编程语言实现Excel数据的自动化处理。无论你是初学者还是有经验的开发者,本文都将帮助你掌握Pandas和openpyxl这两个强大的库,从而提升数据处理的效率和准确性。我们将从环境设置开始,逐步深入到数据读取、清洗、分析和可视化等各个环节,最终实现一个实际的自动化项目案例。 ####
2083 10
|
5月前
|
Python
将Excel特定某列数据删除
将Excel特定某列数据删除
|
Java API Apache
Java编程如何读取Word文档里的Excel表格,并在保存文本内容时保留表格的样式?
【10月更文挑战第29天】Java编程如何读取Word文档里的Excel表格,并在保存文本内容时保留表格的样式?
892 5
|
数据采集 存储 JavaScript
自动化数据处理:使用Selenium与Excel打造的数据爬取管道
本文介绍了一种使用Selenium和Excel结合代理IP技术从WIPO品牌数据库(branddb.wipo.int)自动化爬取专利信息的方法。通过Selenium模拟用户操作,处理JavaScript动态加载页面,利用代理IP避免IP封禁,确保数据爬取稳定性和隐私性。爬取的数据将存储在Excel中,便于后续分析。此外,文章还详细介绍了Selenium的基本设置、代理IP配置及使用技巧,并探讨了未来可能采用的更多防反爬策略,以提升爬虫效率和稳定性。
727 4
|
9月前
|
JavaScript 前端开发 数据可视化
20.6K star!Excel级交互体验!这款开源Web表格神器绝了!
Handsontable 是一款功能强大的 JavaScript 数据表格组件,提供类 Excel 的交互体验。支持实时协作、数据绑定、公式计算等企业级功能,可轻松集成到 React/Vue/Angular 等主流框架。
1622 11
|
10月前
|
分布式计算 Hadoop 大数据
从Excel到Hadoop:数据规模的进化之路
从Excel到Hadoop:数据规模的进化之路
224 10

热门文章

最新文章