JS匯出Excel自動獲取table頁面資料自動獲取，並進行單元格合併行，列
阿新 • • 發佈：2019-02-05
JS獲取table頁面資料自動獲取，並進行單元格合併行，列
自己在百度上看的，感覺還可以
自己吧下面的程式碼複製就可以用了
（關於無法啟動Excel問題，）
- 這是HTML頁面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>NP統計</title> <style> #idParentDiv{margin:50px 0px 0px 50px;background-color: #DFE8F6;font-size: 14px;} </style> <script type="text/javascript" src="js/TableToExcel.js"></script> <script type="text/javascript"> function ExportExcel(tableID){ var tb = new TableToExcel(tableID); tb.setFontStyle("Courier New"); tb.setFontSize(10); tb.setTableBorder(2); tb.setColumnWidth(7); tb.isLineWrap(true); tb.getExcelFile(); } </script> </head> <body> <input type="button" onclick="ExportExcel('idParentDiv')" value="匯出excel"/> <div class="bar"> <table border="1" id = "idParentDiv" style="display:block"> <tr> <td align="middle">省份</td> <td id = "province" colspan="2" align="middle">天津</td> <td colspan="4" align="middle">攜入</td> </tr> <tr> <td rowspan="2" align="middle">時間</td> <td align="middle">開始時間</td> <td align="middle">結束時間</td> <td align="middle">電信</td> <td align="middle">移動</td> <td align="middle">聯通</td> <td align="middle">攜出合計</td> </tr> <tr> <td id = "sDate" align="middle">2010-10-17</td> <td id = "eDate" align="middle">2010-11-17</td> <td align="middle">成功量</td> <td align="middle">成功量</td> <td align="middle">成功量</td> <td align="middle">成功量</td> </tr> <tr> <td rowspan="4" align="middle">攜出</td> <td colspan="2" align="middle">電信</td> <td align="middle">--</td> <td id = "s001002" align="middle">500</td> <td id = "s001003" align="middle">700</td> <td id = "out001" align="middle">1200</td> </tr> <tr> <td colspan="2" align="middle">移動</td> <td id = "s002001" align="middle">3000</td> <td align="middle">--</td> <td id = "s002003" align="middle">2500</td> <td id = "out002" align="middle">5500</td> </tr> <tr> <td colspan="2" align="middle">聯通</td> <td id = "s003001" align="middle">3000</td> <td id = "s003002" align="middle">500</td> <td align="middle">--</td> <td id = "out003" align="middle">3500</td> </tr> <tr> <td colspan="2" align="middle">攜入合計</td> <td id = "in001" align="middle">6000</td> <td id = "in002" align="middle">1000</td> <td id = "in003" align="middle">3200</td> <td id = "inout" align="middle">10200</td> </tr> </table> </div> </body> </html>
- js
-
//自定定義一個用於記錄匯出資訊的對像 function TableToExcel(tableID) { this.tableBorder = -1; //邊框型別，-1沒有邊框 可取1/2/3/4 this.backGround = 0; //背景顏色：白色 可取調色盤中的顏色編號 1/2/3/4.... this.fontColor = 1; //字型顏色：黑色 this.fontSize = 10; //字型大小 this.fontStyle = "宋體"; //字型型別 this.rowHeight = 20; //行高 this.columnWidth = -1; //列寬 this.lineWrap = true; //是否自動換行 this.textAlign = -4108; //內容對齊方式 預設為居中 this.autoFit = true; //是否自適應寬度 this.tableID = tableID; } TableToExcel.prototype.setTableBorder = function(excelBorder) { this.tableBorder = excelBorder; }; TableToExcel.prototype.setBackGround = function(excelColor) { this.backGround = excelColor; }; TableToExcel.prototype.setFontColor = function(excelColor) { this.fontColor = excelColor; }; TableToExcel.prototype.setFontSize = function(excelFontSize) { this.fontSize = excelFontSize; }; TableToExcel.prototype.setFontStyle = function(excelFont) { this.fontStyle = excelFont; }; TableToExcel.prototype.setRowHeight = function(excelRowHeight) { this.rowHeight = excelRowHeight; }; TableToExcel.prototype.setColumnWidth = function(excelColumnWidth) { this.columnWidth = excelColumnWidth; }; TableToExcel.prototype.isLineWrap = function(lineWrap) { if(lineWrap == false || lineWrap == true) { this.lineWrap = lineWrap; } }; TableToExcel.prototype.setTextAlign = function(textAlign) { this.textAlign = textAlign; }; TableToExcel.prototype.isAutoFit = function(autoFit) { if(autoFit == true || autoFit == false) this.autoFit = autoFit; }; //檔案轉換主函式 TableToExcel.prototype.getExcelFile = function() { //先宣告Excel外掛、Excel工作簿等對像 var jXls, myWorkbook, myWorksheet, myHTMLTableCell, myExcelCell, myExcelCell2; var myCellColSpan, myCellRowSpan; try { jXls = new ActiveXObject('Excel.Application'); //外掛初始化失敗時作出提示 } catch(e) { alert("無法啟動Excel!\n\n如果您確信您的電腦中已經安裝了Excel，" + "那麼請調整IE的安全級別。\n\n具體操作：\n\n" + "工具 → Internet選項 → 安全 → 自定義級別 → 對沒有標記為安全的ActiveX進行初始化和指令碼執行 → 啟用"); return false; } jXls.Visible = true;//這句寫在這裡可以看見整個EXCEL文件的載入過程 jXls.DisplayAlerts = false; //不顯示警告 myWorkbook = jXls.Workbooks.Add(); //新建EXCEL檔案 //myWorkbook.Worksheets(2).Delete(); //刪除第3個標籤頁 //myWorkbook.Worksheets(3).Delete(); //刪除第2個標籤頁 myWorksheet = myWorkbook.ActiveSheet; //獲取當前活動的標籤頁 var readRow = 0, readCol = 0; var totalRow = 0, totalCol = 0; var tabNum = 0; //設定列寬 if(this.columnWidth != -1) myWorksheet.Columns.ColumnWidth = this.columnWidth; else myWorksheet.Columns.ColumnWidth = 7; //設定行高 if(this.rowHeight != -1) myWorksheet.Rows.RowHeight = this.rowHeight; //搜尋需要轉換的Table物件，獲取對應行、列數 var obj = document.all.tags("table"); for(var x = 0; x < obj.length; x++) { if(obj[x].id == this.tableID) { tabNum = x; totalRow = obj[x].rows.length; //記錄總行數 //根據第一行的單元格數及各個單元格合併的格數來計算總列數 for(var i = 0; i < obj[x].rows[0].cells.length; i++) { myHTMLTableCell = obj[x].rows[0].cells(i); myCellColSpan = myHTMLTableCell.colSpan; totalCol = totalCol + myCellColSpan; } } } //開始根據總行數、總列數構件模擬表格 var excelTable = new Array(); for(var i = 0; i <= totalRow; i++) { excelTable[i] = new Array(); for(var t = 0; t <= totalCol; t++) { excelTable[i][t] = false; } } //開始轉換表格 for(var z = 0; z < obj[tabNum].rows.length; z++) { readRow = z + 1; readCol = 0; for(var c = 0; c < obj[tabNum].rows(z).cells.length; c++) { myHTMLTableCell = obj[tabNum].rows(z).cells(c); //獲取HTML表格單元格對像 myCellColSpan = myHTMLTableCell.colSpan; //獲取單元格合併列數 myCellRowSpan = myHTMLTableCell.rowSpan; //獲取單元格合併行數 for(var y = 1; y <= totalCol; y++) { if(excelTable[readRow][y] == false) { readCol = y; break; } } //合併行數*合併列數>0說明這一格有合併 if(myCellColSpan * myCellRowSpan > 1) { myExcelCell = myWorksheet.Cells(readRow, readCol); //定位單元格的起始格 myExcelCell2 = myWorksheet.Cells(readRow + myCellRowSpan - 1, readCol + myCellColSpan - 1); //定位單元格的結束格 myWorksheet.Range(myExcelCell, myExcelCell2).Merge(); //合併單元格 myExcelCell.HorizontalAlignment = this.textAlign; //設定對齊方式 myExcelCell.Font.Size = this.fontSize; //設定字型大小 myExcelCell.Font.Name = this.fontStyle; //設定字型樣式 myExcelCell.Font.ColorIndex = this.fontColor; //設定字型顏色 myExcelCell.wrapText = this.lineWrap; //設定是否自動換行 myExcelCell.Interior.ColorIndex = this.backGround; //設定背景色 if(this.tableBorder != -1) { //設定邊框 myWorksheet.Range(myExcelCell, myExcelCell2).Borders(1).Weight = this.tableBorder; myWorksheet.Range(myExcelCell, myExcelCell2).Borders(2).Weight = this.tableBorder; myWorksheet.Range(myExcelCell, myExcelCell2).Borders(3).Weight = this.tableBorder; myWorksheet.Range(myExcelCell, myExcelCell2).Borders(4).Weight = this.tableBorder; } myExcelCell.Value = myHTMLTableCell.innerText; //賦值 //將合併完的單元格設定為已賦值 for(var row = readRow; row <= myCellRowSpan + readRow - 1; row++) { for(var col = readCol; col <= myCellColSpan + readCol - 1; col++) { excelTable[row][col] = true; } } //定位下一個處理的單元格的列數 readCol = readCol + myCellColSpan; } else { //沒有表格合併的處理情況 myExcelCell = myWorksheet.Cells(readRow, readCol); myExcelCell.Value = myHTMLTableCell.innerText; myExcelCell.HorizontalAlignment = this.textAlign; myExcelCell.Font.Size = this.fontSize; myExcelCell.Font.Name = this.fontStyle; myExcelCell.wrapText = this.lineWrap; myExcelCell.Interior.ColorIndex = this.backGround; myExcelCell.Font.ColorIndex = this.fontColor; if(this.tableBorder != -1) { myExcelCell.Borders(1).Weight = this.tableBorder; myExcelCell.Borders(2).Weight = this.tableBorder; myExcelCell.Borders(3).Weight = this.tableBorder; myExcelCell.Borders(4).Weight = this.tableBorder; } excelTable[readRow][readCol] = true; readCol = readCol + 1; } } } if(this.autoFit == true) myWorksheet.Columns.AutoFit; jXls.Visible = true; //顯示Excel檔案 jXls.UserControl = true; jXls = null; //釋放對像 myWorkbook = null; //釋放對像 myWorksheet = null; //釋放對像 };