Front end JS to print the table

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

💪~ If you like it, you can like it or leave a message 💕~~~, thank you ⭐️ 💕 ️~~

Do a simple small demo, specific requirements and styles can be modified according to their own style oh ~ specific code as follows:

HTML part

<div class="tools">
        <button type="button" id="excell" onclick="tableexport('dataTable')">Derived form</button>
</div>
<div class="table_title">Did not participate in the household report</div>
<div class="Export_people">Exporter: Zhang Zhang</div>
<table class="table table-bordered" id="dataTable">
        <thead class="aa">
                <tr>
                        <th>The serial number</th>
                        <th>The street</th>
                        <th>community</th>
                        <th>Building no.</th>
                        <th>Unit no.</th>
                        <th>House number</th>
                        <th>Participate in state</th>
                </tr>
        </thead>
        <tbody class="units">

        </tbody>
</table>
Copy the code

The CSS part

.table {
        width: 80%;
}
table tr.th.td {
        text-align: center;
}
table tr th {
        background: pink;
}
.tdpadding {
        padding: 0 ! important;
}
.table_title {
        width: 80%;
        text-align: center;
        border-top: 1px solid grey;
}
.Export_people {
        width: 80%;
        text-align: right;
        border-top: 1px solid grey;
}
Copy the code

Js part

var data = [{
        a: "Xiao Ming, 111".b: "hhhhh"
}, {
        a: "Xiao Ming 22".b: "hhhhh"
}, {
        a: "Xiao Ming, 333".b: "hhhhh"
}, {
        a: "Xiao Ming, 444".b: "hhhhh"
}, {
        a: "Xiao Ming, 555".b: "hhhhhhhhhh"
}, {
        a: "Xiao Ming, 666".b: "hhhhh"
}]
var str;
for(var i = 0; i < data.length; i++) {
        str += "<tr><td class='bg'>" + data[i].a + "</td><td>" + data[i].b + "</td></tr>"
}
$("#dataTable").append(str)

// Print the table
var idTmr;
function getExplorer() {
        var explorer = window.navigator.userAgent;
        //ie  
        if(explorer.indexOf("MSIE") > =0) {
                return 'ie';
        }
        //firefox  
        else if(explorer.indexOf("Firefox") > =0) {
                return 'Firefox';
        }
        //Chrome  
        else if(explorer.indexOf("Chrome") > =0) {
                return 'Chrome';
        }
        //Opera  
        else if(explorer.indexOf("Opera") > =0) {
                return 'Opera';
        }
        //Safari  
        else if(explorer.indexOf("Safari") > =0) {
                return 'Safari'; }}function tableexport(tableid) {
        if(getExplorer() == 'ie') {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                var oWB = oXL.Workbooks.Add();
                var xlsheet = oWB.Worksheets(1);
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                sel.select();
                sel.execCommand("Copy");
                xlsheet.Paste();
                oXL.Visible = true;

                try {
                        var fname = oXL.Application.GetSaveAsFilename("Excel.xls"."Excel Spreadsheets (*.xls), *.xls");
                } catch(e) {
                        print("Nested catch caught " + e);
                } finally {
                        oWB.SaveAs(fname);
                        oWB.Close(savechanges = false);
                        oXL.Quit();
                        oXL = null;
                        idTmr = window.setInterval("Cleanup();".1); }}else {
                tableToExcel(tableid)
        }
}

function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
}
var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel; base64,',
                template = '
      
      
       {table}
      
',
                base64 = function(
                        s) {
                        return window.btoa(unescape(encodeURIComponent(s)))
                },
                format = function(s, c) {
                        return s.replace(/{(\w+)}/g.function(m, p) {
                                returnc[p]; })}return function(table, name) {
                if(! table.nodeType) table =document.getElementById(table)
                var ctx = {
                        worksheet: name || 'Worksheet'.table: table.innerHTML
                }
                window.location.href = uri + base64(format(template, ctx))
        }
})()
Copy the code

The complete code

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<script type="text/javascript" src=".. /.. / js/jquery - 1.12.1. Min. Js. ""></script>
	<style>
		.table {
			width: 80%;
		}
		table tr.th.td {
			text-align: center;
		}
		table tr th {
			background: pink;
		}
		.tdpadding {
			padding: 0 ! important;
		}
		.table_title {
			width: 80%;
			text-align: center;
			border-top: 1px solid grey;
		}
		.Export_people {
			width: 80%;
			text-align: right;
			border-top: 1px solid grey;
		}
	</style>
	<body>
		<div class="tools">
			<button type="button" id="excell" onclick="tableexport('dataTable')">Derived form</button>
		</div>
		<div class="table_title">Did not participate in the household report</div>
		<div class="Export_people">Exporter: Zhang Zhang</div>
		<table class="table table-bordered" id="dataTable">
			<thead class="aa">
				<tr>
					<th>The serial number</th>
					<th>The street</th>
					<th>community</th>
					<th>Building no.</th>
					<th>Unit no.</th>
					<th>House number</th>
					<th>Participate in state</th>
				</tr>
			</thead>
			<tbody class="units">
				
			</tbody>
		</table>
	</body>
	<script>
		var data = [{
                        a: "Xiao Ming, 111".b: "hhhhh"
                }, {
                        a: "Xiao Ming 22".b: "hhhhh"
                }, {
                        a: "Xiao Ming, 333".b: "hhhhh"
                }, {
                        a: "Xiao Ming, 444".b: "hhhhh"
                }, {
                        a: "Xiao Ming, 555".b: "hhhhhhhhhh"
                }, {
                        a: "Xiao Ming, 666".b: "hhhhh"
                }]
		var str;
		console.log(data)
		for(var i = 0; i < data.length; i++) {
			str += "<tr><td class='bg'>" + data[i].a + "</td><td>" + data[i].b + "</td></tr>"
		}
		$("#dataTable").append(str)

		// Print the table
		var idTmr;
		function getExplorer() {
			var explorer = window.navigator.userAgent;
			//ie  
			if(explorer.indexOf("MSIE") > =0) {
				return 'ie';
			}
			//firefox  
			else if(explorer.indexOf("Firefox") > =0) {
				return 'Firefox';
			}
			//Chrome  
			else if(explorer.indexOf("Chrome") > =0) {
				return 'Chrome';
			}
			//Opera  
			else if(explorer.indexOf("Opera") > =0) {
				return 'Opera';
			}
			//Safari  
			else if(explorer.indexOf("Safari") > =0) {
				return 'Safari'; }}function tableexport(tableid) {
			if(getExplorer() == 'ie') {
				var curTbl = document.getElementById(tableid);
				var oXL = new ActiveXObject("Excel.Application");
				var oWB = oXL.Workbooks.Add();
				var xlsheet = oWB.Worksheets(1);
				var sel = document.body.createTextRange();
				sel.moveToElementText(curTbl);
				sel.select();
				sel.execCommand("Copy");
				xlsheet.Paste();
				oXL.Visible = true;

				try {
					var fname = oXL.Application.GetSaveAsFilename("Excel.xls"."Excel Spreadsheets (*.xls), *.xls");
				} catch(e) {
					print("Nested catch caught " + e);
				} finally {
					oWB.SaveAs(fname);
					oWB.Close(savechanges = false);
					oXL.Quit();
					oXL = null;
					idTmr = window.setInterval("Cleanup();".1); }}else {
				tableToExcel(tableid)
			}
		}

		function Cleanup() {
			window.clearInterval(idTmr);
			CollectGarbage();
		}
		var tableToExcel = (function() {
			var uri = 'data:application/vnd.ms-excel; base64,',
				template = '
       
       
        {table}
       
',
				base64 = function(
					s) {
					return window.btoa(unescape(encodeURIComponent(s)))
				},
				format = function(s, c) {
					return s.replace(/{(\w+)}/g.function(m, p) {
						returnc[p]; })}return function(table, name) {
				if(! table.nodeType) table =document.getElementById(table)
				var ctx = {
					worksheet: name || 'Worksheet'.table: table.innerHTML
				}
				window.location.href = uri + base64(format(template, ctx))
			}
		})()
	</script>
</html>
Copy the code

Effect:

Comments on the lottery

Feel free to discuss in the comments section. The nuggets will be sending out 100 nuggets in the comments section after the diggnation campaign

Raffle gift: 100 pieces, including badges, slippers, mugs, canvas bags, etc., will be distributed at random
Drawing time: Within 3 working days after the end of project Diggnation, all articles that meet the rules will be officially posted in the comments section
Lucky draw: Nuggets official random draw + manual verification
Comment content: comments, suggestions and discussions related to the content of the article. General comments such as “treading on” and “learning” will not win the prize

Column recommended

Recommend their own column, welcome everyone to collect attention to 😊~

Set the interview
Native js set
Vue set
Visual set
CSS set

HTML part

The CSS part

Js part

The complete code

Comments on the lottery

Column recommended

Related Posts

Babel >=7.4 Verify the configurations of transform-Runtime

Getting started with Cypress automated testing

Front and back end UI product development collaboration