如何用JS解析剪切板里的excel内容

目录
  • 前言
  • 1. 粘贴事件和剪切板
  • 2. 剪切板里的内容格式
  • 3. 如何解析html字符串

前言

这次记录的是昨晚一个想法：把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，不展开。倒是通过实践，收获了剪切板的一些知识点。

注：因为只是为了自己的小工具实现，不考虑兼容，在chrome下实践

整个步骤是：

  • 从一封有内容的excel里，选中内容，ctrl+c复制到剪切板（刚好我的内容就是整张表，ctrl+A就可以选中内容）
  • 粘贴到web页面，js监听paste事件，从剪切板对象里获得复制的excel内容（含格式）
  • 将内容解析处理成自己的格式【扩展补充】

这里主要可以分为三点：

1. 粘贴事件和剪切板

document.addEventListener('paste', event => {
    // event里的clipboardData对象
   console.log(event.clipboardData)
})

粘贴事件触发时，可以从event里获取到clipboardData

不过里面使用时还用了window.clipboardData，我在chrome和codepen下试验，都没获取到内容。

2. 剪切板里的内容格式

在上一部分的代码打印到控制台，会有个疑惑，就是控制台打出来一个DataTransfer对象，但其实这个对象在控制台展开时属性不是没有值就是空数组，很懵逼。

直到我往里面console属性内容，才找到。

在这个对象里，getData是它的常用方法，用于获取数据内容，它需要接受一个DOMString的参数。

一般常用的是粘贴纯文本，纯文本 getData('text') 即可获得。

但我要的是excel的格式，一开始并不知道excel是啥格式，但是从excel拷贝再粘贴回excel，格式依然保留，所以想着剪切板应该还保留原内容的格式，所以就尝试下。

通过遍历打印出DataTransfer对象的types属性，可以能知晓

document.addEventListener('paste', event => {
      event.clipboardData.types.map(type=>{console.log(type)})
})

types有三个值：text/plain,text/html,Files

于是用types的‘text/html'，和getData一试，果然拿到了带格式的内容，实际上是一段html代码字符串
大致如下

<html  xmlns:o="urn:schemas-microsoft-com:office:office"  xmlns:x="urn:schemas-microsoft-com:office:excel"  xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta  http-equiv=Content-Type  content="text/html; charset=utf-8">
<style>
...
<table>
...

通过观察得知，想要的内容就是html代码里的table，接下来要转格式就好办了，搞定解析html字符串，用选择器的方式获取单元格内容就差不多了。

3. 如何解析html字符串

这里着实耗费了我不少时间，后面找到了DOMParser,原来原生就支持解析html字符串>>

通过 (new DOMParser()).parseFromString，将字符串转为DOM

const html = event.clipboardData.getData('text/html');
const $doc = new DOMParser().parseFromString(html,'text/html');
// 加载所有的行
const $trs = Array.from($doc.querySelectorAll('table tr'));

于是就可以愉快的querySelectorAll了。

以上就是如何用JS解析剪切板里的excel内容的详细内容，更多关于JS解析剪切板里的excel内容的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS实现复制内容到剪贴板功能

    JS实现复制内容到剪贴板功能

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

  • JavaScript实现复制或剪切内容到剪贴板功能的方法

    项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,能不能通过JS来实现复制剪切呢,今天分享一个兼容IE7浏览器复制的插件给大家,支持使用javascript实现复制.剪切和粘贴. 方法. 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy: function() { }, copy: functio

  • js复制内容到剪贴板代码,js复制代码的简单实例

    如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

  • js实现各种复制到剪贴板的方法(分享)

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

  • JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

  • JS 巧妙获取剪贴板数据 Excel数据的粘贴

    另外的方法就是用flash了,它可以避开浏览器的安全限制,但是system类中只有set的方法,另外的clipboard类中倒是能访问到,但是似乎需要flash10的版本支持. 网上找了一圈,没啥发现.终于想到去看看google sheet是怎么干的. 发现google sheet实现了excel的纯文本的多数据格粘贴,没有安全限制的需要,没有使用flash.可能很多人都知道这种方法了,反正我一开始很惊讶的,但是无奈,google的js文件是处理过的,看起来太累了.然后又去找ZOHO sheet

  • 代码详解JS操作剪贴板

    javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器. javascript可以使用window.clipboardData对象处理剪贴板内容. 保存到剪贴板的方法setData(param1, param2). param1 :数据类型 text 或 URL等. param2 :数据内容. 从剪贴板读出数据的方法 getdata(param1) 清空数据的方法 clearData(param1) <HTML> <HEAD> <TITLE>测试操

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • JS实现获取剪贴板内容的方法

    本文实例讲述了JS实现获取剪贴板内容的方法.分享给大家供大家参考,具体如下: 这里介绍了JS获取剪贴板内容的代码: <Script Language="JavaScript"> var content = clipboardData.getData("Text"); if (content!=null) { document.write("<center><font size=5 color=red>WARNING, T

  • 如何用JS解析剪切板里的excel内容

    目录 前言 1. 粘贴事件和剪切板 2. 剪切板里的内容格式 3. 如何解析html字符串 前言 这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践,收获了剪切板的一些知识点. 注:因为只是为了自己的小工具实现,不考虑兼容,在chrome下实践 整个步骤是: 从一封有内容的excel里,选中内容,ctrl+c复制到剪切板(刚好我的内容就是整张表,ctrl

  • Vue解析剪切板图片并实现发送功能

    Vue解析剪切板图片并实现发送功能

    前言 我们在使用QQ进行聊天时,从别的地方Ctrl+C一张图片,然后在聊天窗口Ctrl+V,QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里,按下Enter键,这张图片将会发送出去.接下来跟各位开发者分享下这项功能在Vue中如何来实现.先跟大家展示下最终实现的效果.在线体验地址 实现思路 页面挂载时监听剪切板粘贴事件 监听文件流 读取文件流中的数据 创建img标签 将获取到的base64码赋值到img标签的src属性 将生成的img标签append到即将发送的消息容器里 监听回车事件 获取可

  • Vue实现剪切板图片压缩功能

    监听剪切板粘贴事件,读取剪切板中的图片文件,转成base64通过img标签显示出来,此时可能会存在剪切板中图片过大,产生上传速度慢问题,接下来就跟大家分享下如何将base64图片进行压缩.先跟大家展示下最终实现的效果: 实现思路 监听剪切板粘贴事件 从事件回调中获取clipboardData中的image对象声明一个变量接收该对象 使用reader.readAsDataURL方法加载clipboardData中的image对象 在reader.onload回调中获取图片base64码 创建Ima

  • 如何用JS有效的压缩图片

    如何用JS有效的压缩图片

    目录 前言 转化关系 具体实现 file2DataUrl(file, callback) file2Image(file, callback) url2Image(url, callback) image2Canvas(image) canvas2DataUrl(canvas, quality, type) dataUrl2Image(dataUrl, callback) dataUrl2Blob(dataUrl, type) canvas2Blob(canvas, callback, qual

  • 如何用JS实现网页瀑布流布局

    如何用JS实现网页瀑布流布局

    前言: 瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 什么是瀑布流布局: 先看效果: 图片多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为了方便理解,在此先给上html.css代码 不完整html代码: <div id="container"> <d

  • 如何用JS WebSocket实现简单聊天

    如何用JS WebSocket实现简单聊天

    短轮询(Polling) 短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送 HTTP 请求,服务端在收到请求后,不论是否有数据更新,都直接进行响应.在服务端响应完成,就会关闭这个 TCP 连接,代码实现也最简单,就是利用 XHR, 通过 setInterval 定时向后端发送请求,以获取最新的数据. setInterval(function() { fetch(url).then((res) => { // success code }) }, 3000); 优点:实现简单. 缺点:会造成数

  • 简单实现兼容各大浏览器的js复制内容到剪切板

    简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js

  • js 剪切板的用法(clipboardData.setData)与js match函数介绍

    经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:setData()语法:    clipboardData.setData(sDataFormat, sData) 参数:sDataFormat:要复制的内容的格式:sData:要复制的内容. 返回值:复制成功返回true:失败返回false. 复制代码 代码如下: <script language="JavaSc

  • Js+Flash实现访问剪切板操作

    Js+Flash实现访问剪切板操作

    最近需要遇到了这个问题点击按钮复制链接的功能果断度娘谷哥.最后找到得解决方案ZeroClipBoard一款开源得js+Flash实现得剪切板操作 但是搜寻了众多例子之后发现大多都是介绍一个页面只有一个固定的复制操作 而我得需求是这样 一个动态Repeater动态加载出各个地址和复制按钮. 这个解决方案得原理是: 拿js动态加载一个透明flash.然后遮盖到你要点击得按钮上面,之后在给这个flash得承载元素上绑定事件动态把要复制得值传递到flash中,用flash访问剪切板. 这时候就出现这么一

  • js复制到剪切板的实例方法

    复制代码 代码如下: <script type="text/javascript" language="javascript">         //复制到剪切板js代码         function copyToClipBoard(s) {             //alert(s);             if (window.clipboardData) {                 window.clipboardData.setD

随机推荐