jQuery tableExport導出 excel

上篇寫的是jQuery 導出word，就試試導出excel。看見網上寫的很亂，我這就把我寫的整理下來，有部分來自網上capy

 

1.   js文件的引用

<script type="text/javascript" src="/resources/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="/resources/lib/tableExport/tableExport.js"></script>
<script type="text/javascript" src="/resources/lib/encrypt/base64.js"></script>

    網上找js很麻煩，這有連接  

tableExport.js :  https://github.com/hhurz/tableExport.jquery.plugin 

base64.js  :https://github.com/davidchambers/Base64.js

 

 2.要導出的數據（頁面展現樣式）

<%-- 表格的樣式--%>

<style>
    html,body{
        width: 99%;
        height: 99%;
        font-family: "微軟雅黑";
        font-size: 12px;
    }
    #tables{
        width: 100%;
        text-align: center;
        border: 1px #000 solid;
        border-collapse: collapse;
    }
    #tables th,#tables td{
        border: 1px solid #000000;
    }
    #tables th{
        font-size: 14px;
        font-weight: bolder;
    }
</style>

<%-- 表格 （具體樣式看上圖）--%>

<table id="tables">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
        <th>地址</th>
    </thead>
    <tbody>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>34</td>
        <td>湖北省武漢市</td>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>34</td>
        <td>湖北省武漢市</td>
    </tr>
    </tbody>
</table>

<input type="button" id="export" value="導出"/>

 

3. jquery的tableExport應用

<script>
    $(document).ready(function(){
        $("#export").click(function(){
            //導出
            $("#tables").tableExport({type:"excel",escape:"false"});
        });
    });
</script>

 

完整代碼：  （更改js路徑後，複製可直接使用）

<script type="text/javascript" src="/resources/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="/resources/lib/tableExport/tableExport.js"></script>
<script type="text/javascript" src="/resources/lib/encrypt/base64.js"></script>
<%----%>
<style>
    html,body{
        width: 99%;
        height: 99%;
        font-family: "微軟雅黑";
        font-size: 12px;
    }
    #tables{
        width: 100%;
        text-align: center;
        border: 1px #000 solid;
        border-collapse: collapse;
    }
    #tables th,#tables td{
        border: 1px solid #000000;
    }
    #tables th{
        font-size: 14px;
        font-weight: bolder;
    }
</style>
<table id="tables">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>年齡</th>
        <th>地址</th>
    </thead>
    <tbody>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>34</td>
        <td>湖北省武漢市</td>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>34</td>
        <td>湖北省武漢市</td>
    </tr>

    </tbody>
</table>
<input type="button" id="export" value="導出"/>
</body>
<script>
    $(document).ready(function(){
        $("#export").click(function(){
            //導出
            $("#tables").tableExport({type:"excel",escape:"false"});
        });
    });
</script>

　　

 

 

---

 

擴展：導出文件的名字不能自定義，在這裏咱們更改下tableExport.js 的代碼

   原代碼：

 $.fn.tableExport = function (options) {
      var defaults = {
        consoleLog:        false,
        csvEnclosure:      '"',
        csvSeparator:      ',',
        csvUseBOM:         true,
        displayTableName:  false,
        escape:            false,
        excelFileFormat:   'xlshtml',    
        excelRTL:          false,       
        excelstyles:       [],           
        exportHiddenCells: false,       
        fileName:          'tableExport',   //  這裏就是導出文件名字
        htmlContent:       false,
        ignoreColumn:      [],

 

改後的代碼：

$.fn.tableExport = function (options,fileName) {  //這裏添加參數，接受自定義名字
      var defaults = {
        consoleLog:        false,
        csvEnclosure:      '"',
        csvSeparator:      ',',
        csvUseBOM:         true,
        displayTableName:  false,
        escape:            false,
        excelFileFormat:   'xlshtml',   
        excelRTL:          false,       
        excelstyles:       [],          
        exportHiddenCells: false,        
        fileName:          fileName == undefined?'tableExport':fileName,   //這裏判斷文件名字是否存在，若是存在就是用自定義，不存在就默認 tableExport.xls

htmlContent: false, ignoreColumn: [], ignoreRow: [],

 

 

前臺引用更改成：

<script>
    $(document).ready(function(){
        $("#export").click(function(){
            //導出
            $("#tables").tableExport({type:"excel",escape:"false"}，'自定義名字');
        });
    });
</script>

 

 

若有更好的請留言。。