tableExport实现表格导出下载为excel格式文件代码

代码语言:html

所属分类:表格

代码描述:tableExport实现表格导出下载为excel格式文件代码

代码标签: tableExport 表格 导出 下载 excel 格式 文件

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <style>
   
    
    
    /* --- The Table Structure --- */
    table {
      border-collapse: separate;
      border-spacing: 0;
    }
    table tr th,
    table tr td {
      border-right: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
      box-shadow: 2px 2px 1px #e5dfcc;
    }
    table tr th:first-child,
    table tr td:first-child {
      border-left: 1px solid #bbb;
    }
    table tr th {
      border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child {
      border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child {
      border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
      border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
      border-bottom-right-radius: 6px;
    }
    
    /* -- The Stlyes -- */
    body {
      margin: 30px;
      background: #ECEAE3;
      font-family: 'Muli', Serif;
    }
    th, td{
      padding: 8px 20px;
    }
    th{
      background: #E5E6EB;
      color: #111;
    }
    td{
      background: #EFF1F6;
    }
    </style>
  
</head>

<body>
    <button class="search" id="btn_export">导出为excel文件</button>

    <div id="div_DataList" style="border: 1px solid #eee;background: white;  max-width:100%; overflow:auto; margin-left:3px; ">
        <table>
            <thead>
                <tr>
                    <th>数值</th>
                    <th>时间</th>
                    <th>公司</th>
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0