将网页中信息表导出为excel

朴灿烈づ我的快乐病毒、 2022-05-25 00:18 170阅读 0赞

<!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>

自己使用过这种方法，