‘壹’ 求助，如何在后台数据读取数据，再前端展示表格
/**
* desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......
* @table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间)
* @table_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间)
*/
function table_rowspan(table_id,table_colnum)
{
if(table_colnum=="even"){
table_colnum = "2n";
}
else if(table_colnum=="odd"){
table_colnum = "2n+1";
}
else{
table_colnum = ""+table_colnum;
}
var cols=[];
var all_row_num = $(table_id+" tr td:nth-child(1)").length;
var all_col_num = $(table_id+" tr:nth-child(1)").children().length;
if(table_colnum.indexOf("n")==-1){
cols[0] = table_colnum;
}
else{
var n = 0;
var a = table_colnum.substring(0,table_colnum.indexOf("n") );
var b= table_colnum.substring(table_colnum.indexOf("n")+1);
//alert("a="+a+"b="+(b==true));
a = a?parseInt(a):1;
b = b?parseInt(b):0;
//alert(b);
while(a*n+b<=all_col_num){
cols[n] = a*n+b;
n++;
}
}
var table_minrow = arguments[2]?arguments[2]:0;
var table_maxrow = arguments[3]?arguments[3]:all_row_num+1;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
for(var j=0;j<cols.length;j++){
$(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {
var table_col_obj = $(this);
if (table_col_obj.html() != "") {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
}
else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) {
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan", table_SpanNum);
} else {
table_firsttd = $(this);
table_SpanNum = 1;
}
}
}
});
}
}
/**
* desc : 合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* @table_rownum : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、......
* @table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
* @table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)
*/
function table_colspan(table_id,table_rownum){
//if(table_maxcolnum == void 0){table_maxcolnum=0;}
var table_mincolnum = arguments[2]?arguments[2]:0;
var table_maxcolnum;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
$(table_id + " tr:nth-child(" + table_rownum + ")").each(function(i){
table_row_obj = $(this).children();
table_maxcolnum = arguments[3]?arguments[3]:table_row_obj.length;
table_row_obj.slice(table_mincolnum,table_maxcolnum).each(function(i){
if(i==0){
table_firsttd = $(this);
table_SpanNum = 1;
}else if((table_maxcolnum>0)&&(i>table_maxcolnum)){
return "";
}else{
table_currenttd = $(this);
if(table_firsttd.text()==table_currenttd.text()){
table_SpanNum++;
if(table_currenttd.is(":visible")){
table_firsttd.width(parseInt(table_firsttd.width())+ parseInt(table_currenttd.width()));
}
table_currenttd.hide(); //remove();
table_firsttd.attr("colSpan",table_SpanNum);
}else{
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
});
}
/**
*调用方法
*/
<script type="text/javascript">
$(document).ready(function () {
table_rowspan("#shaitu", 2);
table_rowspan("#shaitu", 3);
table_rowspan("#shaitu", 4);
});
</script>
‘贰’ 前端表格导出转化excel
var xlsxParam = { raw: true }; //转换成excel时，使用原始数据
var wb = XLSX.utils.table_to_book(
document.querySelector("#outTable"),
xlsxParam
);
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
"职代会管理.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
‘叁’ 能不能用Excel做前端，连接和访问后台的SQLS
注意题主说的是做前端，楼上的回答虽然能解决连接和访问后台SQL的问题，但是Excel是做不了前端的，Excel始终是一个应用程序。
如果想要做到题主的需求，需要在前端页面中嵌入一个类似Excel表格的组件。这种组件如果自己来开发，代价会很大。目前市面上有一些专门做类似Excel表格组件这种的第三方，可以去评估一个不错的组件，引入到自己的系统中去。我这边也可以推荐一款SpreadJS，类似这样的组件嵌入到前端的页面中就可以实现效果了。并且组件本身也有相应的接口可以获取或者设置数据，只需要将数据传递给服务器端，服务器端再与数据库进行交互就可以解决题主的需求。
‘肆’ 如何让Excle表格中的某个单元格一直在页面前端显示
在EXCEL中可以用冻结空格功能，光标定位到需要不动行的下一行，视图－－窗口－－冻结空格；
你的截图为WORD，让WORD表格的每页都显示标题，选中表格的标题行，表格工具－－布局－－数据－－重复标题行。
‘伍’ 前端、后台对excel表格的处理
这样的需求需要通过一些专业的类Excel控件来完成，这些类Excel控件一般都会有Excel表格展示的功能，在您的系统页面中嵌入上控件之后页面中就会初始化一个Excel表格，之后控件一般都会将Excel的相关功能全部封装成对应的API，例如Excel的导入，导出，公式，图表，形状，单元格操作等。之后根据需求需要用到哪些调用相应的API就可以完成了。
所以你上面说的读进用户的Excel，其实就是导入功能，求和就是公式相关操作的一种，提取列的数据就是正常的单元格操作的其中一种。
如果你是前端导入的话，这里推荐使用SpreadJS,这个是一个纯前端的类Excel控件，可以用JavaScript语言实现上述所有的功能。
‘陆’ 如何实现数据库中所有的表在vue前端页面中展示
使用cnpminstallecharts-D。
1、安装插件cnpminstallecharts-D。
2、创建图表，将数据引入。
3、使用容器，使chart自适应高度和宽度，通过窗体高宽计算容器高宽。
4、把这个案例模块化，设计成一个可复用组件，只需传入id、options即可。