『壹』 求助，如何在後台數據讀取數據，再前端展示表格
/**
* 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即可。