Bootstrap 导出选项适用于 5,000 行，但因网络故障导致 16,000 行失败

Posted 2023-05-08

技术标签:

【中文标题】Bootstrap 导出选项适用于 5,000 行，但因网络故障导致 16,000 行失败【英文标题】：Bootstrap export options works for 5,000 rows and failed for 16,000 rows with network failure 【发布时间】：2018-02-09 16:28:27 【问题描述】：

以下是包含 5,000 条记录的 html。导出工作正常。然而，当记录增加到 16,000 条时，它表示所有出口都出现了网络故障。在控制台中没有发现错误。我不确定原因。在 Chrome 中测试。

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id"
    data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="client" data-url="https://jsonplaceholder.typicode.com/photos">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

拥有 > 15,000 条记录

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.min.js"></script>
</head>

<body>
  <table data-toggle="table" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-minimum-count-columns="2" data-show-pagination-switch="true" data-pagination="true" data-id-field="id"
    data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false" data-side-pagination="client" data-url="https://fd-files-production.s3.amazonaws.com/226483/16h4Vwxe1Wz9PZ5Gublomg?X-Amz-Expires=300&X-Amz-Date=20170906T130107Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIA2QBI5WP5HA3ZEA/20170906/us-east-1/s3/aws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=5d705bfd19579c8a93ff81ee076363b2f36d1f5e4540b85f7c86de7643c17055">
    <thead>
      <tr>
        <th data-field="id">Id</th>
        <th data-field="title">Title</th>
        <th data-field="url">URL</th>
        <th data-field="thumbnailUrl">Thumbnail URL</th>
      </tr>
    </thead>
</body>

</html>

【问题讨论】：

查看***.com/questions/19401638/… 这似乎缺少问题中的内容。例如，您是什么意思 Bootstrap 导出选项？你在说什么记录？我只看到一些加载了一些 CSS 和 javascript 的 HTML 以及一个空的 HTML 表。我在 chrome 和 firefox 上看到了这个，看起来不错。无法重现问题 @Kathir 由您提供重现问题的条件。不由读者来填空。 @Kathir 您的 > 15,000 示例的服务器响应 403（禁止）状态代码。 【参考方案1】：

尝试执行以下操作：

1.) 下载库文件而不是使用 CDN。

2.) 增加您在 AWS 服务器上的页面超时时间。您可能没有足够的时间来处理所有这些记录。

3.) 您可能遇到了一些未知的客户端限制，例如 javascript.options.mem.max 为 128MB。（可能会达到 16k 条记录。）

4.) 尝试另一台服务器。 AWS 上可能存在您无法控制的限制（例如内存或连接的“生存时间”），但如果您设置自己的个人专用服务器进行测试，则可以排除这种情况。

5.) 禁用“全部”选项。您真的希望人们一次提取 16k 条记录吗？

6.) 作为最后的手段，尝试制作服务器端分页脚本。

【讨论】：

【参考方案2】：

这看起来是 S3 请求过期的问题：

<?xml version="1.0" encoding="UTF-8"?>
<Error>
   <Code>AccessDenied</Code>
   <Message>Request has expired</Message>
   <X-Amz-Expires>300</X-Amz-Expires>
   <Expires>2017-09-06T13:06:07Z</Expires>
   <ServerTime>2018-06-02T00:00:15Z</ServerTime>
   <RequestId>396C37F87B33C933</RequestId>
   <HostId>pg4uY75WW5p07yvAtqhEFvvKi0FreyHlNo/gJ329aRYHP9/KgzkVxRVkH4lZkwPtw7bLET+HPl8=</HostId>
</Error>

【讨论】：

这看起来很有道理。如果有 15k 条记录，肯定会遇到 300 毫秒超时。

以上是关于Bootstrap 导出选项适用于 5,000 行，但因网络故障导致 16,000 行失败的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 工具提示样式仅适用于第一部分

无法从 Xcode 5 导出未签名的 IPA

熊猫与“左”选项合并正在丢失左侧数据框中的行

如何使用 ag-grid 导出到具有 Angular 6 的大数据（50,000 行）的 excel 功能（内存不足错误）？

如何在嵌套行上设置断点 Bootstrap

关于Bootstrap的通俗讲解