js剪切板复制的表格自动识别

最新推荐文章于 2024-05-27 22:03:33 发布

DenggLin

最新推荐文章于 2024-05-27 22:03:33 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_34117170/article/details/89452699

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述
把excel里的表格数据粘贴到框内，自动识别数据，这个例子比较简单，只是提供个思路

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<div id="box" contenteditable="true"
		style="width:600px;min-height:300px;text-align:justify ;margin:100px auto;border: 1px solid orange;">
	</div>
	<button "getValue()">获取值</button>
	<div id="tip" style="width:600px;min-height: 200px;margin: 20px auto;border:1px solid #ddd;overflow: scroll;"></div>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script>
		document.querySelector('#box').addEventListener('paste', (e) => {

			e.preventDefault();
			e.stopPropagation();
			let paste = (e.clipboardData || window.clipboardData).getData('text/html');
			const selection = window.getSelection();
			if (!selection.rangeCount) return false;
			$('#box').html(paste);
		});
		var fontValue=['name','price','Code','num']
		function getValue(){
			var tableArr=$('#box tr')||[];
			var data=[];
			for( var i=0;i< tableArr.length;i++){
				var trtemp=tableArr[i];
				var obj={};
				var tdTemp=$(trtemp).find('td');
				for(var x=0;x< $(tdTemp).length;x++){
					//var removeSpace=$(tdTemp).eq(x).text().replace(/(^\s*)|(\s*$)/g,'')
					var removeSpace=$(tdTemp).eq(x).text().replace(/\s*/g,'')
					obj[fontValue[x]]=removeSpace
				}
				data.push(obj)
			}
			var str=JSON.stringify(data,undefined, 4);
			$('#tip').html('<pre>'+str+'<pre>');
		}
	</script>
</body>

</html>