我有一个html/jquery/bootstrap代码.我无法添加导出按钮,该按钮将下载表格格式的数据.如何添加导出按钮,以csv和excel格式下载数据?

下面是代码

<html>
  <head>
    <!-- Favicon -->
    <!--link rel="shortcut icon" href="{{url_for('static', filename='images/favicon.ico')}}"-->

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script type = "text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script type = "text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type = "text/javascript"  src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <!-- Datatable -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script type = "text/javascript"  src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type = "text/javascript"  src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script type = "text/javascript"  src="https://cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js"></script>
  </head>
  <body>
    <div class="card">
      <div class="card-body">
        <form method="post">
<!--          <textarea class="form-control" rows="5" name="user_csv"></textarea>-->
          <button class="btn btn-success mt-2">Show output data</button>
        </form>
        <div class="mt-4">
          {% if request.method == 'POST'%}
            <table id="proxies" class="display table nowrap responsive" style="width: 100%">
              <thead>
                <tr>
                  {% for header in results[0].keys() %}
                    <th>{{header}}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for row in results %}
                  <tr>
                    {% for index in range(0, len(fieldnames)) %}
                      <td>{{row[fieldnames[index]]}}</td>
                    {% endfor %}
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% endif %}
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $('#proxies').DataTable();
  </script>

</html>

How to add export button which will download the data in csv and excel format?

推荐答案

Try adding following code in your script.
Working example can be found here!

$('#proxies').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
} );

Html相关问答推荐

电话号码验证器(Angular )

将CSS应用于TD标记内的div

只有一行上有溢出的CSS网格

粘滞的导航栏延伸到超过页边距的右侧

调整一组IMG的大小以适应容器DIV

旧文本淡出,但新文本不会淡入,而是突然出现

如何解决水平塌陷问题?

动画的停止和启动并不顺利

带有排序元素的 CSS 网格

按钮悬停效果不影响按钮内的图标

MUI 日期 Select 器要包含的日期

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

在DIV上应用梯度模糊未如预期工作

如何将背景与之前的内容正确对齐

使用 R 中的 rvest 包获取搜索结果的第一个链接

那边界从何而来?

如何并排放置
的定义列表,但如果
变长,
会向下移动?

如何在没有容器的情况下沿基线将 div 中的元素居中?

在中心而不是边界处填充 svg 的背景