用JS实现网页表格数据导入导出excel。

首先是JS文件中的代码

(function($){
function getRows(target){
var state = $(target).data('datagrid');
if (state.filterSource){
return state.filterSource.rows;
} else {
return state.data.rows;
}
}
function toHtml(target, rows){
rows = rows || getRows(target);
var dg = $(target);
var data = ['<table border="1" rull="all" style="border-collapse:collapse">'];
var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
var trStyle = 'height:32px';
var tdStyle0 = 'vertical-align:middle;padding:0 4px';
data.push('<tr style="'+trStyle+'">');
for(var i=0; i<fields.length-1; i++){
var col = dg.datagrid('getColumnOption', fields[i]);
var tdStyle = tdStyle0 + ';width:'+col.boxWidth+'px;';
data.push('<th style="'+tdStyle+'">'+col.title+'</th>');
}
data.push('</tr>');
$.map(rows, function(row){
data.push('<tr style="'+trStyle+'">');
for(var i=0; i<fields.length-1; i++){
var field = fields[i];
if (row[field] == null){
row[field] = "";
}
data.push(
'<td style="'+tdStyle0+'">'+row[field]+'</td>'
);
}
data.push('</tr>');
});
data.push('</table>');
return data.join('');
} function toArray(target, rows){
rows = rows || getRows(target);
var dg = $(target);
var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields',false));
var data = [];
var r = [];
for(var i=0; i<fields.length; i++){
var col = dg.datagrid('getColumnOption', fields[i]);
r.push(col.title);
}
data.push(r);
$.map(rows, function(row){
var r = [];
for(var i=0; i<fields.length; i++){
r.push(row[fields[i]]);
}
data.push(r);
});
return data;
} function print(target, param){
var title = null;
var rows = null;
if (typeof param == 'string'){
title = param;
} else {
title = param['title'];
rows = param['rows'];
}
var newWindow = window.open('', '', 'width=800, height=500');
var document = newWindow.document.open();
var content =
'<!doctype html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8">' +
'<title>'+title+'</title>' +
'</head>' +
'<body>' + toHtml(target, rows) + '</body>' +
'</html>';
document.write(content);
document.close();
newWindow.print();
} function b64toBlob(data){
var sliceSize = 512;
var chars = atob(data);
var byteArrays = [];
for(var offset=0; offset<chars.length; offset+=sliceSize){
var slice = chars.slice(offset, offset+sliceSize);
var byteNumbers = new Array(slice.length);
for(var i=0; i<slice.length; i++){
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, {
type: ''
});
} function toExcel(target, param){
var filename = null;
var rows = null;
var worksheet = 'Worksheet';
if (typeof param == 'string'){
filename = param;
} else {
filename = param['filename'];
rows = param['rows'];
worksheet = param['worksheet'] || 'Worksheet';
}
var dg = $(target);
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) } var table = toHtml(target, rows);
var ctx = { worksheet: worksheet, table: table };
var data = base64(format(template, ctx));
if (window.navigator.msSaveBlob){
var blob = b64toBlob(data);
window.navigator.msSaveBlob(blob, filename);
} else {
var alink = $('<a style="display:none"></a>').appendTo('body');
alink[0].href = uri + data;
alink[0].download = filename;
alink[0].click();
alink.remove();
}
} $.extend($.fn.datagrid.methods, {
toHtml: function(jq, rows){
return toHtml(jq[0], rows);
},
toArray: function(jq, rows){
return toArray(jq[0], rows);
},
toExcel: function(jq, param){
return jq.each(function(){
toExcel(this, param);
});
},
print: function(jq, param){
return jq.each(function(){
print(this, param);
});
}
});
})(jQuery);

导出数据到excel

function exportExcel() {
var pageForm = {};
var orderList=invokeRemoteSync("networkMetadataAction","queryOLTNetworkMetadata",{pageForm:pageForm});//从后端查询数据到前端 var rows = orderList.listAll;
//var rows = $("#faultDataGrid").datagrid("getRows");
/*var bodyData = JSON.stringify(rows); var a = bodyData.replace("areaName","aa");
var postData = {
data: a
}; var judge = invokeRemoteSync("networkMetadataAction","importToExcel",{postData:postData});*/ //$('#faultDataGrid').datagrid('hideColumn','edit'); $('#faultDataGrid').datagrid('toExcel',{
filename: 'excel名称.xls',
rows: rows,
worksheet: 'Worksheet'
}); // export to excel }

导出数据到excel

function importExcel() {//导入

        $('#popupDialog').dialog({
title: '标题',
width: 600,
height: 300,
closed: true,
cache: false,
modal: true,
content:"<div id=\"dw-eoms-import-importExcelView\"><div class=\"modal-header\"><h4 class=\"modal-title\">选择Excel文件</h4></div>\n" +
"<div class=\"modal-body\"><div class=\"row\"><form name=\"form1\" class=\"form-horizontal\" id=\"file_form\" action=\"/isa-web-fault/uploadExcel\" enctype=\"multipart/form-data\">\n" +
" <div class=\"form-group\"><div class=\"input-group\"> <input type=\"file\" onchange='importFile(this)' name=\"uploadFile\" class=\"upload\"><input type=\"hidden\" name=\"staffName\" id=\"staffName\" value=\"\"><input type=\"hidden\" name=\"staffId\" id=\"staffId\" value=\"\">\n" +
" <input type=\"hidden\" name=\"index\" id=\"index\" value=\"\"><span class=\"input-group-btn\">\n" +
"<button id=\"dw-planImport-importExcelView-upload\" type=\"button\" class=\"btn btn-default\">\n" +
"<span>上传文件</span></button></span></div></div><span class=\"alert-warning\">仅支持xls、xlsx类型的文件</span></form></div></div>\n" +
"<div class=\"button-group\">\n" +
"<button type=\"button\" id=\"impactCancel\" class=\"btn btn-default\" data-dismiss=\"modal\">关闭</button>\n" +
"</div></div></div>"
});
$('#popupDialog').window('open');
$('#popupDialog').window('center'); $("#dw-planImport-importExcelView-upload").on("click", function () {
var path = document.all.uploadFile.value;
var fileName = path.substr(path.lastIndexOf('\\') + 1, (path.length - path.lastIndexOf("\\")));
if (fileName.indexOf('.') == -1 || path.indexOf(':') == -1) {
$.messager.alert("错误","请先选择导入文件!","info");
return;
}
//验证文件格式
var fileType = (fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length)).toLowerCase();
if (fileType != 'xlsx' && fileType != 'xls') {
$.messager.alert("错误","文件格式不正确!","info");
return false;
}
if (!obj.files) {
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'
});
}
// console.log(JSON.stringify(wb.Sheets[0])) //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
//document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
console.log(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])));
var jsonStr = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
jsonStr = jsonStr.replaceAll("名称1","objName");
jsonStr = jsonStr.replaceAll("名称2","remoteMountainousAreas");
jsonStr = jsonStr.replaceAll("名称3","outdoorMinicomputer"); var objs = eval(jsonStr);
console.log(objs);
/*var arr = [];
for (var j = 0;j<objs.length;j++){
var obj = {};
obj.areaName = objs[j];
}*/
/*var pageForm;
var orderList=invokeRemoteSync("networkMetadataAction","queryOLTNetworkMetadata",{pageForm:pageForm});*/ var misObjName = invokeRemoteSync("networkMetadataAction","insertSetting",{objs:objs});//后端对数据库进行修改
if (misObjName.length > 0){
$.messager.alert("错误",misObjName+"网元设备不存在!","info");
}else if (misObjName.length == 0){
$.messager.alert("成功","上传文件成功!","info");
$('#popupDialog').window('close');
} };
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
} }); $("#impactCancel").on("click", function () {
$('#popupDialog').window('close');
}); } function importFile(fileData) {
obj = fileData;
} String.prototype.replaceAll = function(s1,s2){
return this.replace(new RegExp(s1,"gm"),s2);
} function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w,
l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}

导入EXCEL数据的DAO层代码

public String insertSetting(Map map) {
List list = (List) map.get("objs");
String faultObjName = "";
for (int i = 0;i<list.size();i++){
Map obj = (Map) list.get(i);
if (obj.get("objName") instanceof String == false){
obj.put("objName",obj.get("objName").toString());
}
if (obj.get("remoteMountainousAreas").equals("是")){
obj.put("remoteMountainousAreas","1");
}else if (obj.get("remoteMountainousAreas").equals("否")){
obj.put("remoteMountainousAreas","0");
}
if (obj.get("outdoorMinicomputer").equals("是")){
obj.put("outdoorMinicomputer","1");
}else if (obj.get("outdoorMinicomputer").equals("否")){
obj.put("outdoorMinicomputer","0");
}
String sql = "update MAINTAIN_MODEL_OBJECT MMO set MMO.REMOTE_MOUNTAINOUS_AREAS=:remoteMountainousAreas,MMO.OUTDOOR_MINICOMPUTER = :outdoorMinicomputer where MMO.OBJECT_NAME=:objName ";
int count = super.update(sql,obj);
if (count == 0){
faultObjName = faultObjName+MapUtils.getString(obj,"objName")+",";
}
}
if (faultObjName.length() > 0){
faultObjName = faultObjName.substring(0,faultObjName.length()-1); }
return faultObjName;
}

网页表格导入导出Excel的更多相关文章

  1. uniapp导入导出Excel

    众所周知,uniapp作为跨端利器,有诸多限制,其中之一便是vue页面不支持传统网页的dom.bom.blob等对象. 所以,百度上那些所谓的导入导出excel的方法,大部分都用不了,比如xlsx那个 ...

  2. thinkphp导入导出excel表单数据

    在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...

  3. NPOI导入导出EXCEL通用类,供参考,可直接使用在WinForm项目中

    以下是NPOI导入导出EXCEL通用类,是在别人的代码上进行优化的,兼容xls与xlsx文件格式,供参考,可直接使用在WinForm项目中,由于XSSFWorkbook类型的Write方法限制,Wri ...

  4. 使用PHPExcel导入导出excel格式文件

    使用PHPExcel导入导出excel格式文件  作者:zccst  因为导出使用较多,以下是导出实现过程.  第一步,将PHPExcel的源码拷贝到项目的lib下  文件包含:PHPExcel.ph ...

  5. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  6. Java基于注解和反射导入导出Excel

    代码地址如下:http://www.demodashi.com/demo/11995.html 1. 构建项目 使用Spring Boot快速构建一个Web工程,并导入与操作Excel相关的POI包以 ...

  7. ASP.NET Core使用EPPlus导入导出Excel

    开发过程中,经常会遇到导入导出数据的需求,本篇博客介绍在.NET Core中如何使用EPPlus组件导入导出Excel EPPlus: EPPlus是使用Open Office XML格式(xlsx) ...

  8. Vue框架下实现导入导出Excel、导出PDF

    项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...

  9. Java实现导入导出Excel:POI和EasyExcel

    文章与CSDN同步,欢迎访问:https://blog.csdn.net/qq_40280582/article/details/107300081 代码地址:https://gitee.com/il ...

随机推荐

  1. python selenium测试用例断言

    1.if ...else ...判断进行断言 #coding=utf-8 from time import * from selenium import webdriver "): driv ...

  2. 五、MySQL系列之高级知识(五)

    本篇 主要介绍MySQL的高级知识---视图.事件.索引等相关知识: 一.视图 在学习视图时我们需要什么是视图,视图有哪些好处以及视图的相关操作: 1.1  什么是视图? 关于视图通俗来讲就是一条se ...

  3. TLS1.3对CIP的影响(对密码套件的解释)

    1.术语定义的即使(算法)Definition of terms (optional) Cipher Suite  :通信数据保护规范,对TLS指定对端身份验证,关键技术机制,后续数据加密和数据验证机 ...

  4. 001——搭建OpenCV实验环境

    开发环境 VS 2017 15.7.6 OpenCV 3.4.1 搭建环境 设置环境变量 创建Win32 空项目 配置属性管理器 测试代码 #include<opencv2/opencv.hpp ...

  5. java基础(2)---基本语法

    一.程序注释 二.HelloWorld 三.关键字 四.常量 五.变量 六.标识符: 七.数据类型 数据类型间的转换: (1)自主转换:不需要明确指出所要转化的类型是什么,而是由java虚拟机自动转化 ...

  6. Android-jacoco代码覆盖率:单元测试覆盖率+功能测试覆盖率

    参考:https://docs.gradle.org/current/dsl/org.gradle.testing.jacoco.tasks.JacocoCoverageVerification.ht ...

  7. OpenLayer3入门——[一]

    一.OpenLayer3下载 首先下载OpenLayer3开发包,步骤如下: 下载地址https://github.com/openlayers/openlayers/releases/tag/v3. ...

  8. Jquery “This”的指向

    JavaScript中的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的.如在全局作用域调用一个含this的对象,此时当前对象的this指向的是win ...

  9. 并发编程大师系列之:wait/notify/notifyAll/condition

    1. wait().notify()和notifyAll()方法是本地方法,并且为final方法,无法被重写. 2. 调用某个对象的wait()方法能让当前线程阻塞,并且当前线程必须拥有此对象的mon ...

  10. 使用docker简单启动springboot项目

    1.搭建docker环境 需要linux系统必须是centOS7以上 执行一下命令: yum install epel-release –y yum clean all yum list 2.安装 y ...