框架：vue+jq ，Spring boot+maven
pom：
<!--FTP上传下载-->
<dependency>
<groupId>commons-net</groupId>
<artifactId>commons-net</artifactId>
<version>3.6</version>
</dependency>
<dependency>
<groupId>fr.opensagres.xdocreport</groupId>
<artifactId>org.apache.poi.xwpf.converter.core</artifactId>
<version>1.0.6</version>
</dependency>
思路：将前端在线编辑的数据，通过ajax传递到后台，由后台生成Excel并且插入数据，再由ftp上传到指定位置
前端：ZCell+jq
如下图导入需要的js以及css
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PMS在线Excel编辑</title>
<meta name="keywords" content="前端,excel,插件，ZCELL,智表,免费,jquery,浏览器,仿EXCEL,官网">
<meta name="description" content="智表（ZCELL）是一款浏览器仿excel表格jquery前端插件。智表可以为你提供excel般的智能体验，支持双击编辑、设置公式、设置显示小数精度、下拉框、自定义单元格、复制粘贴、不连续选定、合并单元格、拆分单元格、插入行列、删除行列、隐藏行列、键盘操作等。">
<meta name="author" content="智表研发团队">
<meta name="copyright" content="智表研发团队版权所有">
<script type="text/javascript" src="../../../lib/zcell/jquery.min.js"></script>
<script type="text/javascript" src="../../../lib/zcell/ZCell.register.js"></script>
<script type="text/javascript" src="../../../lib/zcell/ZCell.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../lib/zcell/ZCell.css" />
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 1px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}
.button4:hover {
background-color: #e7e7e7;
}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<span> </span>
<form id="form1" action="" method="post" enctype="multipart/form-data">
<div id="cellContainer" style="width:1200px;height:650px; border:1px solid #DDECFE; overflow:hidden;">
</div>
</form>
<!--#include virtual="../../commons/commonJs.shtml"-->
<!-- 本页面js -->
<script type="text/javascript" src="../../../js/sys/user/user_excel_model.js"></script>
</body>
</html>
//JS文件
//页面加载时，执行
var zcell1;
//准备数据源
var jsondata = [//四行五列
// ["列1", "列2", "列3", "列4", "列5", "列6", "列7", "列8", "列9", "列10", "列11", "列12", "列13"],
//如果需要从后台获取数据，接收数组参数
];
var httpurl = httpurlSystem;
//页面加载时执行
$(document).ready(function () {
//创建JSCELL，指明承载容器
zcell1 = new ZCell(document.getElementById("cellContainer"));
//创建表，并指定列，行数
zcell1.InserSheet(0, 10, 24);
//加载数据
zcell1.GetSheet(0).LoadArrData(jsondata);
zcell1.GetSheet(0).SetCellType(2, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='comput()' style='border: solid 1px;'>实时计算</button>"
});
zcell1.GetSheet(0).SetCellType(3, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='setcolw()' style='border: solid 1px;'>设置列宽</button>"
});
zcell1.GetSheet(0).SetCellType(4, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='setrowh()' style='border: solid 1px;'>设置行高</button>"
});
zcell1.GetSheet(0).SetCellType(5, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='setLabHidden()' style='border: solid 1px;'>隐藏标尺</button>"
});
zcell1.GetSheet(0).SetCellType(6, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='setLabdisplay()' style='border: solid 1px;'>显示标尺</button>"
});
zcell1.GetSheet(0).SetCellType(7, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='endedit()' style='border: solid 1px;'>退出编辑</button>"
});
zcell1.GetSheet(0).SetCellType(8, 22, {
"code": "button",
"object": "<button type=\"button\" οnclick='getrccount()' style='border: solid 1px;'>获取行列数</button>"
});
zcell1.GetSheet(0).SetCellType(7, 23, {
"code": "button",
"object": "<button type=\"button\" οnclick='getselcells()' style='border: solid 1px;'>获取选定格</button>"
});
zcell1.GetSheet(0).SetCellType(2, 23, {
"code": "button",
"object": "<button type=\"button\" οnclick='getcor()' style='border: solid 1px;'>获取当前坐标</button>"
});
zcell1.GetSheet(0).SetCellType(3, 23, {
"code": "button",
"object": "<button type=\"button\" οnclick='Getdata()' style='border: solid 1px;'>获取表数据</button>"
});
zcell1.GetSheet(0).SetCellType(4, 23, {
"code": "button",
"object": "<button type=\"button\" οnclick='gettdval()' style='border: solid 1px;'>获取单元格值</button>"
});
// zcell1.GetSheet(0).SetCellReadOnly(5, 23, 1);// 设置只读属性，1 只读，0 非只读
zcell1.GetSheet(0).SetCellType(6, 23, {
"code": "button",
"object": "<button type=\"button\" οnclick='hidestabar()' style='border: solid 1px;'>隐藏状态栏</button>"
});
});
//自定义函数，公式中可以直接引用
function GETARGS() {
var vi = 0.23;
return vi;
}
//获得数据
function Getdata() {
//获取当前数据的数组，可以黏贴后查看效果
var datastr = zcell1.GetSheet(0).GetDataArr();
alert("第6行5列单元格数据为：" + datastr[5][4]);
}
//获得单元格值
function gettdval() {
var val = zcell1.GetSheet(0).GetCellValue(6, 7);
alert("第6列7行单元格值为：" + val);
}
//设置标签隐藏
function setLabHidden() {
//设置列\行标签不显示
zcell1.GetSheet(0).ShowColLab(0);
zcell1.GetSheet(0).ShowRowLab(0);
}
//设置标签显示
function setLabdisplay() {
//设置列\行标签不显示
zcell1.GetSheet(0).ShowColLab(1);
zcell1.GetSheet(0).ShowRowLab(1);
}
//设置列宽
function setcolw() {
zcell1.GetSheet(0).SetColWidth(3, 200);
}
//设置行高
function setrowh() {
zcell1.GetSheet(0).SetRowHeight(16, 50);
}
function comput() {
alert("选定数值单元格后，可以在智表下方查看实时计算结果");
}
//获取当前单元格
function getcor() {
var str1 = "当前列号：" + zcell1.GetSheet(0).GetCurrentColNo() + ",行号：" + zcell1.GetSheet(0).GetCurrentRowNo();
alert(str1);
}
//获取表 行数，列数
function getrccount() {
var str1 = "总列数：" + zcell1.GetSheet(0).GetCols() + ",总行数：" + zcell1.GetSheet(0).GetRows();
alert(str1);
}
//获取选定单元格，返回JSON串
function getselcells() {
alert(zcell1.GetSheet(0).GetSelectCellsJson());
}
//保存并退出编辑状态FTP上传函数
function endedit() {
var datastr = zcell1.GetSheet(0).GetDataArr(); //获取Excel页面所有数据，且数据为二维数组(重要）
// zcell1.SaveEdit();
$.ajax({
url: httpurl+'user/ftpUpload?token='+TokenUtils.getToken(),
type: "POST",
contentType : "application/json" ,
data : JSON.stringify(datastr), //把二维数组转换成json字符串
traditional: true,
success:function (data) {
alert(data)
},
error:function (data,index) {
alert(data)
}
})
}
function editdata() {
alert("我是ZCELL自定义编辑事件");
return;
}
function summitfun() {
alert("我是ZCELL自定义按钮触发事件");
}
function hidestabar() {
zcell1.SetStatusBar(0);
}
//合并单元格
function merge() {
//合并单元格
zcell1.GetSheet(0).MergeCells(2, 4, 2, 5);
zcell1.GetSheet(0).MergeCells(3, 4, 3, 5);
zcell1.GetSheet(0).MergeCells(4, 4, 6, 4);
}
//取消合并单元格
function unmerge() {
zcell1.GetSheet(0).SplitCell(2, 4);
zcell1.GetSheet(0).SplitCell(3, 4);
zcell1.GetSheet(0).SplitCell(4, 4);
}
//控制层核心函数
/**
* ftp 文件上传
*/
@RequestMapping("/ftpUpload")
@ResponseBody
@RequiresPermissions("user:list")
public void ftpUpload(@RequestBody(required=false) List<List<String>> arr,HttpServletResponse res, HttpServletRequest request)throws IOException {
//后台接受参数要用list泛型来接受前台的二维数组
// 创建一个excel文件
HSSFWorkbook book = new HSSFWorkbook();
// 创建Sheet对象
HSSFSheet sheet = book.createSheet("测试");
HSSFRow row = null;
HSSFCell cell = null;
int rowIndex = 0;
for(int j=0;j<=arr.size()-1;j++){
row= sheet.createRow(rowIndex);
for(int k=0;k<arr.get(j).size();k++){
cell = row.createCell(k);
cell.setCellValue(arr.get(j).get(k));
}
rowIndex++;
}
FTPClient ftp = new FTPClient();
try {
// 连接ftp服务器 ftp.connect("ip", 端口);
ftp.connect("127.0.20.41", 21);
// 登录
ftp.login("username", "password");
// 设置上传路径
String path = "/xx";
// 检查上传路径是否存在 如果不存在返回false
boolean flag = ftp.changeWorkingDirectory(path);
System.out.println(flag);
if (!flag) {
// 创建上传的路径 该方法只能创建一级目录，在这里如果/home/ftpuser存在则可创建image
ftp.makeDirectory(path);
System.out.println("11");
}
// 指定上传路径
ftp.changeWorkingDirectory(path);
// 指定上传文件的类型 二进制文件
ftp.setFileType(FTP.BINARY_FILE_TYPE);
ByteArrayOutputStream os = new ByteArrayOutputStream();
book.write(os);
byte[] b = os.toByteArray();
ByteArrayInputStream in = new ByteArrayInputStream(b);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy_MM_dd");
Date date = new Date();
String name = new String(("测试_" + sdf.format(date) + ".xls").getBytes("GBK"), "iso-8859-1");//涉及到中文问题 根据系统实际编码改变
ftp.storeFile(name, in);
} catch (Exception e) {
e.printStackTrace();
}
}
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
