javascript读取excel表格实现简单的药品临期管理

zzwwyy2023

已于 2024-06-27 22:20:31 修改

阅读量590

点赞数 23

分类专栏： javascript + excel 学习与应用文章标签： excel javascript jquery css html

于 2024-06-23 17:17:18 首次发布

本文链接：https://blog.csdn.net/zzwwyy2023/article/details/139902409

版权

javascript + excel 学习与应用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下载地址：javascript读取excel文件实现简单的药品临期和过期提醒资源-CSDN文库https://download.csdn.net/download/zzwwyy2023/89474572

前篇主要介绍了用EXCEL表格公式计算日期来实现药品的临期和过期提醒。此篇主要是通过javascript读取EXCEL表格，显示在网页上面，并实现分类查看、模糊搜索功能，使用起来更为直观方便。

读取EXCEL文件使用jQuery前端excel导入插件：xlsx.core.js。

临期和过期使用javascript进行计算，没有读取EXCEL文件里的结果，但结果一致。

界面如下图：

因为javascript的安全机制，必须手动点击左上角的EXCEL按钮，选择对应的EXCEL表格文件才能正确显示。本文附全部代码和EXCEL文件，可以在PC端各个常见平台运行，如果使用手机显示，可以用QQ浏览器打开手机本地html文件，即可运行。

下面是html代码：

<!DOCTYPE html> 
<html lang="zh-cn"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title></title>
<link href="css/css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/xlsx.core.min.js"></script>  
<script type="text/javascript" src="js/readExcel.js"></script>
</head> 
<body> 
	<div  class="menu">
		<ul>
			<li>
				<input type="file" id="file" style="display:none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> 
				<a href="javascript:selectFile()">EXCEL</a>
			</li>
			<li>
				<a>选择</a>
				<select id="selector">
					<option value='all'>全部</a>
					<option value='1'>临期</a>
					<option value='2'>过期</a>
				</select>
			</li>			
			<li>
				<a>模糊搜索</a><input type="text" id="search" placeholder="药品名称" />
			</li>			
		</ul>	
	</div>
	<div id="result"></div>
	<div id="container" class="text"></div>
</body> 
</html>

下面是css代码：

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}
body { 
	padding: 0px; 
	margin: 0px; 
} 
 table { 
	width:100%;
	border-collapse: collapse; 
} 
 th, td { 
 border: solid 1px #000000; 
 padding: 2px 2px; 
} 
td{
	font-size: 12px;
	text-align: center; /* 水平居中 */
	vertical-align: middle; /* 垂直居中 */
}

.text
{
	width:100%;
	padding:30px;
	overflow-x:auto;
	line-height:28px;		
}
.text table{
	 white-space: nowrap; 
}
.text ul
 {
	list-style-position: inside;
	list-style-type: square;
}
.text li {/*  text-indent: 15px; */ } 


.menu
{  
  width: 100%;
  height: 50px; 
  background: #333333;  
 }
.menu ul li
{
  height:50px;
  line-height:50px;
  list-style: none;
  display: inline-block;
}
.menu input, .menu select, .menu a{
	padding:0 20px;
	height:46px;
	line-height:46px;
	display: inline-block;
	background-color: #333333;	
	border: none;
	border-radius: 0px;
	font-size: 16px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
}

下面是javascript：

var workSheet = [];

$(function() {	 
	//监听文件选择器
	 document.getElementById('file').addEventListener('change', function(e) { 
		 var files = e.target.files; 
		 if(files.length == 0) return; 
		 var f = files[0]; 
		 if(!/\.xlsx$/g.test(f.name)) { 
			alert('仅支持读取xlsx格式！'); 
			return; 
		} 
		readWorkbookFromLocalFile(f, function(workbook) {			
			readWorkbook(workbook); 
		}); 
	 }); 
	 //监听下拉列表
	$("#selector").change(function() {		
		show(workSheet[0],$("#selector option:selected").val());
	});
	//键入搜索关键字
	$('#search').on('input', function() {		
		show(workSheet[0],$("#search").val());
	});	
 }); 
 
function readWorkbookFromLocalFile(file, callback) { 	
	var reader = new FileReader(); 
	reader.onload = function(e) { 
		var data = e.target.result; 
		var workbook = XLSX.read(data, {type: 'binary'}); 
		if(callback) callback(workbook); 
	}; 
	reader.readAsBinaryString(file); 
}  

function readWorkbook(workbook) {
	//工作表名称集合 
	var sheetNames = workbook.SheetNames;	
	sheetNames.forEach(function(sheetName,id){
		var sheetData = workbook.Sheets[sheetName];
		var csv = XLSX.utils.sheet_to_csv(sheetData);		
		workSheet[id] = csv.split('\n');
		//从CSV转换过来的数组最后有1个空元素	
		workSheet[id].pop(); 
		workSheet[id] = clearRecord(workSheet[id]);
	});	
	show(workSheet[0],'all');
}

function show(ws, filter){
	var html = '<table>';
	ws.forEach(function(row, idx) {	
		var cells = row.split(',');		
		if(handle(cells,filter)){			
			html += '<tr>';
			cells.forEach(function(cell,id){				
				html+= '<td>' +cell +'</td>';				
			});
			html += '</tr>';				
		}		
	});
	html += '</table>';
	$('#container').html(html);
}

function clearRecord(originalRecord){
	if ($.isEmptyObject(originalRecord) ){
		return originalRecord;	
	}  
	//如果最后一行全部是逗号就删掉	
	while (new RegExp("^[\s ,]+$").test( $.trim(originalRecord[originalRecord.length -1]))) {
		originalRecord.pop();		
	}
	//如果最后一行是空的就删掉
	while ($.trim(originalRecord[originalRecord.length -1]).length <1) {
		originalRecord.pop();
	}	
	var columns= originalRecord[originalRecord.length -1].split(',')
	//如果最后一行全部是逗号就删掉
	while ($.trim(columns[0]).length<1) {		
		originalRecord.pop();
		columns= originalRecord[originalRecord.length -1].split(',')
	}	
	return originalRecord;
}
function handle(cells,filter){
	if((filter == 'all')||(cells[0] == '药品名称')){
		return true;
	}else if(filter == '1'){				
		var currentDate = new Date(); // 当前日期
		currentDate.setMonth(currentDate.getMonth() + 6); // 增加6个月
		var newDate = currentDate.toLocaleDateString(); // 格式化日期		
		if( new Date(Date.parse(newDate.replace("-", "/"))) >= new Date(Date.parse(cells[3].replace("-", "/")))){
			return true;
		}else{
			return false;
		}			
	}else if(filter == '2'){
		var currentDate = new Date(); // 当前日期		
		var newDate = currentDate.toLocaleDateString(); // 格式化日期		
		if( new Date(Date.parse(newDate.replace("-", "/"))) >= new Date(Date.parse(cells[3].replace("-", "/")))){
			return true;
		}else{
			return false;
		}	
	}else{
		if(cells[0].includes(filter)){
			return true;
		}
	}
}
function selectFile() { 
	document.getElementById('file').click(); 
}

zzwwyy2023

关注

23
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript读取excel表格实现简单的药品临期管理

因为javascript的安全机制，必须手动点击左上角的EXCEL按钮，选择对应的EXCEL表格文件才能正确显示。本文附全部代码和EXCEL文件，可以在PC端各个常见平台运行，如果使用手机显示，可以用QQ浏览器打开手机本地html文件，即可运行。此篇主要是通过javascript读取EXCEL表格，显示在网页上面，并实现分类查看、模糊搜索功能，使用起来更为直观方便。临期和过期使用javascript进行计算，没有读取EXCEL文件里的结果，但结果一致。
复制链接

扫一扫