html js page table export example

Introduction:

Download the table in html

Call example:

// 调用示例
exportTableToExcel('myTable', 'myFile.xls',[0,2],[]);

Parameter analysis:

/**
 * 将表格数据导出为Excel文件
 * @param {string} tableID -要导出的表ID
 * @param {string} fileName -要保存的Excel文件的名称
 * @param {array} excludeColumns -要排除的列索引数组
 * @param {array} mathColumns - 数字科学计数法 前面加逗号处理
 */
function exportTableToExcel(tableID, fileName, excludeColumns, mathColumns)

Verification code:

/**
 * 将表格数据导出为Excel文件
 * @param {string} tableID -要导出的表ID
 * @param {string} fileName -要保存的Excel文件的名称
 * @param {array} excludeColumns -要排除的列索引数组
 * @param {array} mathColumns - 数字科学计数法 前面加逗号处理
 */
function exportTableToExcel(tableID, fileName, excludeColumns, mathColumns) {
	var tab_text = "<table border='2px'>";
	var textRange;
	var j = 0;
	var tab = document.getElementById(tableID); // table id

	// Add title row to table HTML
	tab_text += "<tr bgcolor='#87AFC6'>";
	for (var i = 0; i < tab.rows[0].cells.length; i++) {
		// Check if current column needs to be excluded
		if (excludeColumns.includes(i)) {
			continue;
		}

		// Remove HTML tags from cell content
		var cellText = tab.rows[0].cells[i].textContent || tab.rows[0].cells[i].innerText;
		tab_text += "<td>" + cellText + "</td>";
	}
	tab_text += "</tr>";

	// Loop through table rows
	for (j = 1; j < tab.rows.length; j++) {
		tab_text = tab_text + "<tr>";

		// Loop through table columns
		for (var i = 0; i < tab.rows[j].cells.length; i++) {
			// Check if current column needs to be excluded
			if (excludeColumns.includes(i)) {
				continue;
			}

			// Format cell value
			var cellValue = tab.rows[j].cells[i].textContent || tab.rows[j].cells[i].innerText;
            if(cellValue == "" || cellValue == null || cellValue == undefined){
                cellValue='';
            }else{
                if (mathColumns.includes(i)) {
                    cellValue ="'"+ cellValue.toString();
                }
                else if (/\d{4}-\d{2}-\d{2}/.test(cellValue)) { // If cell value is a date in YYYY-MM-DD format
                    var dateParts = cellValue.split("-");
                    cellValue = dateParts[0] + "-" + dateParts[1] + "-" + dateParts[2];
                }
            }

			tab_text = tab_text + "<td>" + cellValue + "</td>";

		}

		tab_text = tab_text + "</tr>";
	}

	tab_text = tab_text + "</table>";
	tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
	tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
	tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // remove if u want input fields in your table

	var ua = window.navigator.userAgent;
	var msie = ua.indexOf("MSIE ");

	if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
		// If Internet Explorer
		txtArea1.document.open("txt/html", "replace");
		txtArea1.document.write(tab_text);
		txtArea1.document.close();
		txtArea1.focus();
		sa = txtArea1.document.execCommand("SaveAs", true, fileName);
	} else {
		//other browser not tested on IE 11
		var link = document.createElement("a");
		link.download = fileName;
		link.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(tab_text);
		link.click();
	}
}

Full code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html页面表格导出示例</title>
	</head>
	<body>
		<table id="myTable">
			<thead>
				<tr>
					<th>Name</th>
					<th>Age</th>
					<th>City</th>
					<th>City2</th>
					<th>City3</th>
					<th>City4</th>
					<th>City5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>John</td>
					<td>25</td>
					<td>New York</td>
					<td>New York2</td>
					<td>New York3</td>
					<td>New York4</td>
					<td></td>
				</tr>
				<tr>
					<td>Jane</td>
					<td>30</td>
					<td>Los Angeles</td>
					<td>Los Angeles2</td>
					<td>Los Angeles3</td>
					<td>Los Angeles4</td>
					<td></td>
				</tr>
				<tr>
					<td>Bob</td>
					<td>40</td>
					<td>Chicago</td>
					<td>Chicago2</td>
					<td>Chicago3</td>
					<td>Chicago4</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		/**
		 * 将表格数据导出为Excel文件
		 * @param {string} tableID -要导出的表ID
		 * @param {string} fileName -要保存的Excel文件的名称
		 * @param {array} excludeColumns -要排除的列索引数组
		 * @param {array} mathColumns - 数字科学计数法 前面加逗号处理
		 */
		function exportTableToExcel(tableID, fileName, excludeColumns, mathColumns) {
			var tab_text = "<table border='2px'>";
			var textRange;
			var j = 0;
			var tab = document.getElementById(tableID); // table id

			// Add title row to table HTML
			tab_text += "<tr bgcolor='#87AFC6'>";
			for (var i = 0; i < tab.rows[0].cells.length; i++) {
				// Check if current column needs to be excluded
				if (excludeColumns.includes(i)) {
					continue;
				}

				// Remove HTML tags from cell content
				var cellText = tab.rows[0].cells[i].textContent || tab.rows[0].cells[i].innerText;
				tab_text += "<td>" + cellText + "</td>";
			}
			tab_text += "</tr>";

			// Loop through table rows
			for (j = 1; j < tab.rows.length; j++) {
				tab_text = tab_text + "<tr>";

				// Loop through table columns
				for (var i = 0; i < tab.rows[j].cells.length; i++) {
					// Check if current column needs to be excluded
					if (excludeColumns.includes(i)) {
						continue;
					}

					// Format cell value
					var cellValue = tab.rows[j].cells[i].textContent || tab.rows[j].cells[i].innerText;
					if (cellValue == "" || cellValue == null || cellValue == undefined) {
						cellValue = '';
					} else {
						if (mathColumns.includes(i)) {
                            cellValue ="'"+ cellValue.toString();
                        } else if (/\d{4}-\d{2}-\d{2}/.test(cellValue)) { // If cell value is a date in YYYY-MM-DD format
							var dateParts = cellValue.split("-");
							cellValue = dateParts[0] + "-" + dateParts[1] + "-" + dateParts[2];
						}
					}
					tab_text = tab_text + "<td>" + cellValue + "</td>";

				}

				tab_text = tab_text + "</tr>";
			}

			tab_text = tab_text + "</table>";
			tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
			tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
			tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // remove if u want input fields in your table

			var ua = window.navigator.userAgent;
			var msie = ua.indexOf("MSIE ");

			if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
				// If Internet Explorer
				txtArea1.document.open("txt/html", "replace");
				txtArea1.document.write(tab_text);
				txtArea1.document.close();
				txtArea1.focus();
				sa = txtArea1.document.execCommand("SaveAs", true, fileName);
			} else {
				//other browser not tested on IE 11
				var link = document.createElement("a");
				link.download = fileName;
				link.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(tab_text);
				link.click();
			}
		}
	</script>
	<script>
		// 调用示例
		exportTableToExcel('myTable', 'myFile.xls', [0, 2],[]);
	</script>
</html>

html js page table export example

Guess you like