zoukankan      html  css  js  c++  java
  • html中的table导出Excel

    演示地址:

    http://www.jq22.com/yanshi3312

    具体代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
      
      <head>
        <meta charset="UTF-8">
        <title>table export</title></head>  
      <body>
        <table id="table1">
          <tbody>
            <tr>
              <td>文字1</td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>文字1</td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>文字1</td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>文字1</td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>文字1</td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>文字1</td>
              <td>咨询</td>
              <td>测试</td></tr>
          </tbody>
        </table>
        <table id="table2">
          <thead>
            <tr>
              <td>标题一</td>
              <td>标题二</td>
              <td>标题三</td></tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <a href="#" target="_blank">文字2</a></td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>
                <a href="#" target="_blank">文字2</a></td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>
                <a href="#" target="_blank">文字2</a></td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>
                <a href="#" target="_blank">文字2</a></td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>
                <a href="#" target="_blank">文字2</a></td>
              <td>咨询</td>
              <td>测试</td></tr>
            <tr>
              <td>
                <a href="#" target="_blank">文字2</a></td>
              <td>咨询</td>
              <td>测试</td></tr>
          </tbody>
        </table>
        <div id="export">
          <a data-type="json" href="javascript:;">导出json</a>
          <a data-type="txt" href="javascript:;">导出txt</a>
          <a data-type="csv" href="javascript:;">导出csv</a>
          <a data-type="xls" href="javascript:;">导出excel</a>
          <a data-type="doc" href="javascript:;">导出word</a></div>
        <script src="Blob.js"></script>
        <script src="FileSaver.js"></script>
        <script src="tableExport.js"></script>
        <script>var $exportLink = document.getElementById('export');
          $exportLink.addEventListener('click',
          function(e) {
            e.preventDefault();
            if (e.target.nodeName === "A") {
              tableExport('table1', '测试测试', e.target.getAttribute('data-type'))
            }
          },
          false);</script>
      </body>
    </html>

    源码下载:

    http://files.cnblogs.com/files/gguozhenqian/Demo.rar

  • 相关阅读:
    Java Calendar详解
    Java Calendar 类的时间操作
    java获取properties配置文件值
    解决Eclipse中.properties文件中文乱码问题
    java web每天定时执行任务(四步轻松搞定)
    为经典版eclipse增加web and JavaEE插件
    VMware创建虚拟机教程详解及问题解决
    Eclipse对svn操作切换账号或更换svn地址方法
    oracle 查看用户所在的表空间
    (转)CentOS之7与6的区别
  • 原文地址:https://www.cnblogs.com/gguozhenqian/p/5717555.html
Copyright © 2011-2022 走看看