Use the table form JS Export to excel

Before Java are used in the back end to do export, the data table to do too much trouble, directly at the front end of the table is derived, and very convenient.

Blog article link: https://www.zjhuiwan.cn/info/20200212/4004242219096560.html

html form code

<div style="vertical-align:top;padding-left:2px;">
    <a class="btn btn-sm btn-info tooltip" name="excelExport" id="excelExport" onclick="toExcel();" title="导出到excel"><i class="ace-icon fa fa-cloud-download  bigger-110"></i>导出</a>
</div>
<table id="table_report" class="table table-striped table-bordered table-hover" style="margin-top:22px;" border="1">
								<caption style="text-align: center;display:none"><h3>企业反映问题诉求汇总表</h3></caption>
								<caption style="text-align: left;">
									<c:if test="${(pd.addStart!=null&&pd.addStart!='')&&(pd.addEnd == null || pd.addEnd == '' )} "> 
									</ C: IF>
										Statistics reporting time starts at: pd.addStart $ {}
									<c: if test = "$ {(pd.addStart == null || pd.addStart == '') && (!! pd.addEnd = null && pd.addEnd = '')}"> 
										Statistics reporting time ends at: pd.addEnd} {$ 
									</ C: IF> 
								</ Caption> 
								<TR> 
									<TD> ID </ TD> 
									<TD> territory </ TD> 
									<TD> furnished the number of enterprises </ TD> 
									<TD> of the problem the number of enterprises </ td> 
									<td> number of business issues </ td> 
									<td> talent employment </ td> 
									<td> financial services </ td> 
									<td> financial and tax </ td> 
									<td> energy elements </ td> 
									<td> environmental Protection Administration of Work Safety </ td> 
									<td> Technology innovation </ td> 
									<td> public Service </ td> 
									<td> Approval Service </ td> 
									<td> epidemic prevention and control </ td> 
									<td> other </ td> 
									<td> Note </ td> 
								</ TR>
								<c:if test="${(name=='admin1'||name=='丽水市' )&&areaTest==null}">
									<tr>
										<td></td>
										<td>合计</td>
										<td>${list.companyNum }</td>
										<td>${list.companyNum }</td>
										<td>${list.questionNum }</td>
										<td>${list.type0Num }</td>
										<td>${list.type1Num }</td>
										<td>${list.type2Num }</td>
										<td>${list.type3Num }</td>
										<td>${list.type4Num }</td>
										<td>${list.type5Num }</td>
										<td>${list.type6Num }</td>
										<td>${list.type7Num }</td>
										<td>${list.type8Num }</td>
										<td>${list.type9Num }</td>
										<td></td>
									</tr>
								<tr>
									<td>1</td>
									<td>市直</td>
									<td>${shizhiList.companyNum }</td>
									<td>${shizhiList.companyNum }</td>
									<td>${shizhiList.questionNum }</td>
									<td>${shizhiList.type0Num }</td>
									<td>${shizhiList.type1Num }</td>
									<td>${shizhiList.type2Num }</td>
									<td>${shizhiList.type3Num }</td>
									<td>${shizhiList.type4Num }</td>
									<td>${shizhiList.type5Num }</td>
									<td>${shizhiList.type6Num }</td>
									<td>${shizhiList.type7Num }</td>
									<td>${shizhiList.type8Num }</td>
									<td>${shizhiList.type9Num }</td>
									<td></td>
								</tr>
						......
								</c:if>
								
								<c:if test="${name!='admin1'&&name!='丽水市' }">
									<tr>
										<td>1</td>
										<td>${name }</td>
										<td>${list.companyNum }</td>
										<td>${list.companyNum }</td>
										<td>${list.questionNum }</td>
										<td>${list.type0Num }</td>
										<td>${list.type1Num }</td>
										<td>${list.type2Num }</td>
										<td>${list.type3Num }</td>
										<td>${list.type4Num }</td>
										<td>${list.type5Num }</td>
										<td>${list.type6Num }</td>
										<td>${list.type7Num }</td>
										<td>${list.type8Num }</td>
										<td>${list.type9Num }</td>
										<td></td>
									</tr>
								</c:if>
							</table>

  

JS code

method 1

// export Excel 
 function ToExcel () { 
      //window.location.href='<%=basePath%>pmb/excelShowInfo.do '; 
      // Get form 
      var exportFileContent = document.getElementById ( "table_report") the outerHTML;.                 
      / / format into Excel, table of contents by btoa into base64, this method is only used when the file is small (less than 1M) 
      //exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent))); 
      // Link var = "Data : "+ MIMEType +"; Base64, "+ exportFileContent; 
      // use Blob 
      var = new new blob Blob ([exportFileContent], {type:" text / Plain; charset = UTF-. 8 "}); // solve the Chinese garbled 
      blob Blob new new = ([the String.fromCharCode (0xFEFF), BLOB], {type: blob.type}); 
    // set the link 
      var link = window.URL.createObjectURL(blob); 
      var a = document.createElement ( "a" ); // create a label 
      a.download = "enterprise of the problem demands summary .xls"; // set the target of the hyperlink is downloaded (file name) 
      a.href = Link ; // set link a label 
      document.body.appendChild (a); // a label added to the page 
      a.click (); // set a click event tag trigger 
      document.body.removeChild (a); // removing a tab 
 }

  

Simple table exported to excel just fine.

image.png

`There are several issues that need attention

1, no border excel derived, as shown below. Solution: table need to add border = "1";

 158151948900109085079.png

2, the table name can add bold <h2> </ h2>

 

 

3, but may need to export Canadian display table pages do not show: none

4, the exported excel open will be prompted to insecurity, as shown below:

 image.png

This has not been resolved .. look ye out tomorrow. Js export format should be the issue, force became excel. Pro-test with Java back-end guide does not have this problem,

However, to excel not prompt this type of error (usually customers do not want to download the file may change), you can:

1 while pressing the keyboard "Ctrl + R", open the "Run", type "regedit" open "Registry Editor"

2 Find "HKEY_CURRENT_USER \ Software \ Microsoft \ Office \ 16.0 \ Excel \ Security" option, you can also "see" in check "address bar" to copy the path into the address bar. Depending on the version may be 14.0 (Office 2010), etc., as the case may be.

3 Click in the blank and a new right, select "DWORD (32- bit) value (D)". At this point there will be a "New Value # 1" under the list of items.

4 Select "New Value # 1" Right-click and select "Rename", changed its name to "ExtensionHardening", case-sensitive.

 5 Select just modified "ExtensionHardening", right-click "Edit."

6 change the value to 0, and keep the default hexadecimal unchanged, and then click OK to complete the setup.

Then open not suggesting that ...

Guess you like

Origin www.cnblogs.com/sunonzj/p/12301817.html