1. 程式人生 > >使用jquery.table2excel,將HTML的table標籤資料匯出成excel,包含匯出圖片到excel

使用jquery.table2excel,將HTML的table標籤資料匯出成excel,包含匯出圖片到excel

在web實際使用中,需要將頁面的表格轉換成為EXCEL表格,原想寫個原生的,但是發現一個外掛很好用——jquery.table2excel,在這寫一個簡單的demo。

程式碼

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>TABLE轉換EXCEL</title>
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"
>
</script> <script src="js/jquery.table2excel.js"></script> <style type="text/css"> .btn{ margin:20px; } </style> </head> <body> <center> <input class="btn" type
="button" value="點選匯出">
<div class="table2excel"> <table id = 'testTable' border="1"> <tr> <th>標題一</th> <th>標題二</th> <th>標題三</th
>
</tr> <tr class="noExl"> <td>100 (不匯出)</td> <td>200 (不匯出)</td> <td>300 (不匯出)</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> <tr> <td><a href="http://www.baidu.com">baidu.com</a></td> <td><input tyle="text" value="input 資料"></td> <td><img src="http://yuyuan:8080/zzz/img/test.jpg" alt="image"></td> </tr> </table> </div> </center> <script type="text/javascript"> $(function() { $(".btn").click(function(){ $(".table2excel").table2excel({ // 不被匯出的表格行的CSS class類 exclude: ".noExl", // 匯出的Excel文件的名稱 name: "Excel Document Name", // Excel檔案的名稱 filename: "test", //檔案字尾名 fileext: ".xls", //是否排除匯出圖片 exclude_img: false, //是否排除匯出超連結 exclude_links: false, //是否排除匯出輸入框中的內容 exclude_inputs: false }); }); }); </script> </body> </html>

參考

  1. jQuery之家介紹
  2. table2excel的github地址
  3. table2excel的js檔案下載地址

總結

  1. 傳入的引數預設是true(排除),需要顯示的話就設定為false就可以了。
  2. 然後圖片需要注意的是:圖片地址要寫一個完整的可以訪問的網際網路路徑,要不然的話excel打不開,會顯示空白的,然後你的電腦必須可以訪問網際網路。
  3. 這個demo並沒有設定圖片和表格的樣式,有需要的自己設定。
  4. 我開啟的檔案是用office2016開啟的。office其他的版本,以及wps均沒有實驗,可能會有差異吧,請注意!
  5. office 的受保護的檢視,開啟也是無法看到圖片的,請自行搜尋如何取消。