将Excel中的数据导入html以及将html表格数据导出Excel

news/2024/7/19 15:53:55 标签: js, 导入excel

导入Excel:
html:

<input type="file" onchange="importExcel(this,false,function(data){getJsonData(data)})" class="upload-input" />
<div>
		<table class="table table-bordered">
			<thead>
				<tr>
					 <th>ID</th> 
					 <th>被派送人手机号</th>
					 <th>被派送人姓名</th> 
				     <th>派送时间</th>
					<th>面额</th>
					<th>使用限制</th>
					<th>有效期</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</div>
	<script>
			function importExcel(obj,rABS,callback) {
		        var wb;
		        if(!obj.files) { return; }
	
		        const IMPORTFILE_MAXSIZE = 2*1024;//这里可以自定义控制导入文件大小
		        var suffix = obj.files[0].name.split(".")[1];
	
		        if(suffix != 'xls' && suffix !='xlsx'){
		            alert('导入的文件格式不正确!');
		            return;
		        }
		        if(obj.files[0].size/1024 > IMPORTFILE_MAXSIZE){
		            alert('导入的表格文件不能大于2M');
		            return;
		        }
	
		        var f = obj.files[0];
		        var reader = new FileReader();
		        reader.onload = function(e) {
		            var data = e.target.result;
		            if(rABS) {
		                wb = XLSX.read(btoa(fixdata(data)), {//手动转化
		                    type: 'base64'
		                });
		            } else {
		                wb = XLSX.read(data, {
		                    type: 'binary'
		                });
		            }
		            var jsonData=JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) );
		            callback(jsonData);
		        };// reader.onload闭合
		        if(rABS) {
		           reader.readAsArrayBuffer(f);
		        } else {
		           reader.readAsBinaryString(f);
		        }
			}
	
		function getJsonData(jsonData) {
			var data = JSON.parse(jsonData);
			var str ="";
			for(var i=0;i<data.length;i++){
				var tr ="<tr>";
				for(var j in data[i]){
					var td ="<td>";
					td += data[i][j];
					td += "</td>";
					tr +=td;
				}
				tr += "</tr>";
				str +=tr;
			}
			
			$("tbody").html(str);
		    console.log(jsonData);  //这里通过回调函数获取到data;
		}

	</script>

需引入的文件:
ysExport.js
xlsx.full.min.js

导出Excel:
html:

<input type="button" id="btn" value="导出" />
		<div>
			<table class="table table-bordered" id="example">
				<thead>
					<tr>
						<th>ID</th>
						<th>被派送人手机号</th>
						<th>被派送人姓名</th>
						<th>派送时间</th>
						<th>面额</th>
						<th>使用限制</th>
						<th>有效期</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>男</td>
						<td>23</td>
						<td>张三</td>
						<td>男</td>
						<td>23</td>
					</tr>
					<tr>
						<td>2</td>
						<td>李四</td>
						<td>男</td>
						<td>27</td>
						<td>张三</td>
						<td>男</td>
						<td>23</td>
					</tr>
					<tr>
						<td>3</td>
						<td>王麻子</td>
						<td>男</td>
						<td>65</td>
						<td>张三</td>
						<td>男</td>
						<td>23</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script>
			$(function(){
				$("#btn").click(function(){
					$("#example").table2excel({
						// 不被导出的表格行的CSS class类
						exclude: ".noExl",
						// 导出的Excel文档的名称,(没看到作用)
						name: "Excel Document Name",
						// Excel文件的名称
						filename: "意见反馈"
					});
				});
			});
		</script>

需引入文件
jq
jquery.table2excel.js
提取码:qwcg


http://www.niftyadmin.cn/n/1202763.html

相关文章

form表单以及内嵌框架标签

今关于今天所学习的东西又复杂又简单&#xff0c;上午学习了form表单&#xff0c;也是挺简单的&#xff1b;搭配table表格使用也是非常熟练。 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页&#xff1b;还有在内嵌框架标签中添加视频以及视频标签里的一些属…

linux内网IP如果判断出网IP地址

[rootjumpserver ~]# curl https://ip.cn当前 IP: 162.14.210.16 来自: 河南省郑州市 xx网络转载于:https://www.cnblogs.com/huangyanqi/p/10601503.html

vue 组件之间传值解析

1、父子组件传值 Ⅰ、父组件向子组件传值 ①首先先定义一个子组件&#xff0c;小编命名为child&#xff0c;在child组件中组件props&#xff0c;props里的字段可以详细一些&#xff0c;也可以很简洁 例&#xff1a; <template><div><div>{{message}}(子组件…

vue项目中多行文本超出省略失效解决方式

使用vue-cli构建的项目在打包之后&#xff0c;-webkit-box-orient: vertical 会丢失&#xff0c;还有包括使用flex布局进行兼容性hack写法的一些属性&#xff0c;如: #app{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-…

巧用Spring Boot中的Redis

本篇文章转载自巧用Spring Boot中的Redis Redis 介绍 Redis 是目前业界使用最广泛的内存数据存储。相比 Memcached&#xff0c;Redis 支持更丰富的数据结构&#xff0c;例如 hashes, lists, sets 等&#xff0c;同时支持数据持久化。除此之外&#xff0c;Redis 还提供一些类数据…

vue常用插件

一、轮播图-------vue-awesome-swiper 安装&#xff1a;npm install vue-awesome-swiper --save ① vue中使用&#xff1a; 全局使用 mport Vue from vue import VueAwesomeSwiper from vue-awesome-swiper// require styles import swiper/dist/css/swiper.cssVue.use(VueA…

input框输入文本限制

1、文本框只能输入数字(小数点也不能输入) <input onkeyup"this.valuethis.value.replace(/\D/g,)" onafterpaste"this.valuethis.value.replace(/\D/g,)" />2、只能输入数字,能输小数点 ①方式一&#xff1a; <input onkeyup"if(isNaN(va…

36、自定义控件详解(一)-- 自定义属性

一、自定义控件分类 1.1、原生控件拓展 修改原有控件我们只需要创建一个类继承该View(ViewGroup)&#xff0c;再原有的逻辑上添加自己的实现即可。 a)文本框(TextView)默认是无法获取焦点的&#xff0c;想让它获取焦点&#xff0c;我们可以通过自定义控件&#xff0c;并重写isF…