如何使用html表格自定義或採用tableexport.js第三方插件以excel格式導出

時間 2019-12-24

標籤如何使用 html 表格自定義採用 tableexport.js tableexport 第三方插件 excel 格式導出欄目 HTML 简体版

原文原文鏈接

First method :user-definedjavascript

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 命名x空間即調用excel裏的屬性-->
<html xmlns:x="urn:schemas-microsoft-com:office:excel">
<head>
   <!-- 顯示網格線 -->
   <xml>
      <x:ExcelWorkbook>
         <x:ExcelWorksheets>
            <x:ExcelWorksheet>
               <x:Name></x:Name>
               <x:WorksheetOptions>
                  <x:Print>
                     <x:ValidPrinterInfo />
                  </x:Print>
               </x:WorksheetOptions>
            </x:ExcelWorksheet>
         </x:ExcelWorksheets>
      </x:ExcelWorkbook>
   </xml>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>導出excel文檔</title>
</head>
<body>
<%
   String exportToExcel = request.getParameter("exportToExcel");
   String fileName = request.getParameter("fileName")==""?"excel":request.getParameter("fileName");
   if (exportToExcel != null
         && exportToExcel.toString().equalsIgnoreCase("YES")) {
      //設置內容和頭文件爲excel形式
      response.setContentType("application/vnd.ms-excel");
      response.setHeader("Content-Disposition","inline; filename="+fileName+".xls");
   }
%>
<table align="left" border="2">
   <thead>
   <tr>
      <th>Sr. No.</th>
      <th>Text Data</th>
      <th>Number Data</th>
   </tr>
   </thead>
   <tbody>
   <%for (int i = 0; i < 10; i++) {%>
   <tr>
      <td align="center"><%=i + 1%></td>
      <td align="center">This is text data <%=i%></td>
      <td align="center"><%=i * i%></td>
   </tr>
   <%}%>
   </tbody>
</table>
<%
   for (int i = 0; i < 10; i++) {
%>
 <br>
<%}if (exportToExcel == null) {%>
<p>
   <form action="" method="post">
   <input type="hidden" name="exportToExcel" value="YES">
   <!-- 自定義文件名，沒有則默認excel.xls -->
請輸入你要保存爲EXCEL文檔的文件名<input type="text" name="fileName" placeholder="如:excel">
 <input type="submit" value="Export to Excel">
</form>
</p>
<%}%>
</div>
</body>
</html>

Second method :Using tableexport.js plug-incss

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>導出爲Excel格式文件</title>
   <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="../static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   <link href="../static/dist/css/tableexport.min.css" rel="stylesheet">
   <!--[if IE]>
   <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
   <![endif]-->
</head>
<body>
<div class="container">
   <div class="row">
      <div class="col-md-12">
         <br>
         <h4>Countries By Population</h4>
         <div class="table-responsive">
            <table id="Population-list-1" class="table table-striped table-bordered"
                  data-name="cool-table">
               <thead>
               <tr>
                  <th>Sr. No.</th>
                  <th>Text Data</th>
                  <th>Number Data</th>
               </tr>
               </thead>
               <tbody>
                  <%for (int i = 0; i < 10; i++) {%>
               <tr>
                  <td align="center"><%=i + 1%></td>
                  <td align="center">This is text data <%=i%></td>
                  <td align="center"><%=i * i%></td>
               </tr>
                  <%}%>
               <tbody>
            </table>
         </div>
      </div>
   </div>
</div>
<!--  獲取文件名  -->
<input type="hidden" name="FileName" value="FileName" id="FileName">
<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- 顯示按鈕插件 -->
<script>window.jQuery || document.write('<script src="../static/js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/js/xlsx.core.min.js"></script>
<script src="../static/js/blob.js"></script>
<script src="../static/js/FileSaver.min.js"></script>
<script src="../static/dist/js/tableexport.js"></script>
<script type="text/javascript">
   $(function(){
      var FileName = window.document.getElementById('FileName').value;
      $("table").tableExport({
         headings: true,
         footers: true,
         formats:["xlsx","xls","csv","txt"],
         fileName:FileName,
         bootstrap:true
      });
   })
</script>
</body>
</html>

下載相關插件可參照該博主:http://www.jqueryfuns.com/resource/2381html

注：固然方法多種多樣，你也能夠本身在方法一的基礎之上調CSS樣式等，如有不足之處，歡迎指點。html5