将网页中信息表导出为excel

最新推荐文章于 2024-05-16 18:15:52 发布

千秋清和

最新推荐文章于 2024-05-16 18:15:52 发布

阅读量1.1k

点赞数

文章标签： js thml excel

本文链接：https://blog.csdn.net/qianqiuqinghe/article/details/80194168

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id=""style="background-color: salmon; height: 50px;width: 150px;" οnclick="excel()">
			导出excel
		</div>
		<script type="text/javascript">
			function excel(){
				var jsonData=[{序号:"",姓名:"",民族:"",班级:"",}];
				var data = [{
					'id':'001',
					'name':'xiaoming',
					'race':'汉',
					'grade':'1'
				}]
				
//				var jsonData=[{}];
				for(var i=0;i<10;i++){
					jsonData.push({序号:i,姓名:data[0].name,民族:data[0].race,班级:data[0].grade,});
					
				}
				
				cloneAndConvert(jsonData);
				
			}
			function cloneAndConvert(jsonData){
 
				//  var jsonData = [{firstName:"Lorem  Ipsum ",  lastName:"Lorem  Ipsum", age:46}];
				//	for(i=0;i<9;i++)
				//	{	  
				//	   jsonData.push({firstName:"Lorem  Ipsum"+i, lastName:"Lorem  Ipsum"+i, age:46});
				//	}
				
				
				   
//				    var filteredGridData = JSON.parse(JSON.stringify(jsonData));
				    var filteredGridData = jsonData;
				    JSONToCSVConvertor(filteredGridData, "UserReport.csv", true);
				}
				
				function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {		
				
				    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
				    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
				    var CSV = '';    
				    //This condition will generate the Label/Header
				    if (ShowLabel) {
				        var row = "";
				        
				        //This loop will extract the label from 1st index of on array
				        for (var index in arrData[0]) {
				            //Now convert each value to string and comma-seprated
				            row += index + ',';
				        }
				        row = row.slice(0, -1);
				        //append Label row with line break
				        CSV += row + '\r\n';
				    }
				    
				    //1st loop is to extract each row
				    for (var i = 0; i < arrData.length; i++) {
				        var row = "";
				        //2nd loop will extract each column and convert it in string comma-seprated
				        for (var index in arrData[i]) {
				            row += '"' + arrData[i][index] + '",';
				        }
				        row.slice(0, row.length - 1);
				        //add a line break after each row
				        CSV += row + '\r\n';
				    }
				
				    if (CSV == '') {        
				        alert("Invalid data");
				        return;
				    }   
				    
				    //this trick will generate a temp "a" tag
				    var link = document.createElement("a");    
				   	link.id="lnkDwnldLnk";
				    
				    //this part will append the anchor tag and remove it after automatic click
				    document.body.appendChild(link);
				   
					var csv = CSV;	
					blob = new Blob([csv], { type: 'text/csv' }); 
					var csvUrl = window.webkitURL.createObjectURL(blob);
					var filename = 'UserExport.csv';
					$("#lnkDwnldLnk")
					.attr({
						'download': filename,
						'href': csvUrl
					}); 
				
					$('#lnkDwnldLnk')[0].click();    
				    document.body.removeChild(link);
				}
		</script>
	</body>
</html>

自己使用过这种方法，

千秋清和

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将网页中信息表导出为excel

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../js/jquery-3.0.0.js" type="text/javascript"
复制链接

扫一扫