Bootstrap-table服务端分页下打印全量数据方案求助

方案一：临时请求全量数据生成打印DOM #

这是最直接的前端实现方式，核心是绕开默认的当前页打印逻辑，单独请求全量数据后生成临时表格完成打印：

• 操作步骤：
  1. 监听自定义打印按钮的点击事件，阻止Bootstrap-table默认的打印行为
  2. 复用当前表格的搜索、筛选参数，移除page、limit这类分页参数，给后端传递print: true标识（方便后端区分是打印请求）
  3. 调用原AJAX接口拿到全量数据后，在页面创建一个隐藏的临时表格，复制原表格的列配置和样式，填充全量数据
  4. 调用浏览器原生window.print()打印临时表格，打印完成后销毁临时表格
• 前端代码示例：

// 假设表格ID是#myTable，自定义打印按钮类为print-full-btn
$('#myTable').on('click', '.print-full-btn', function(e) {
  e.preventDefault();
  // 获取当前表格的配置与查询参数
  const tableOptions = $('#myTable').bootstrapTable('getOptions');
  const printParams = {...tableOptions.queryParams, page: undefined, limit: undefined, print: true};
  
  $.ajax({
    url: tableOptions.url,
    type: tableOptions.method,
    data: printParams,
    success: res => {
      // 创建临时表格
      const $tempTable = $('<table id="temp-print-table" class="table table-bordered"></table>');
      // 复用原表格列配置
      $tempTable.bootstrapTable({
        columns: tableOptions.columns,
        data: res.data,
        pagination: false,
        search: false,
        showPrint: false
      });
      // 隐藏临时表格，仅用于打印渲染
      $tempTable.css({position: 'absolute', top: '-9999px', left: '-9999px'});
      $('body').append($tempTable);
      
      // 触发打印
      window.print();
      
      // 打印完成后清理临时表格
      setTimeout(() => $tempTable.remove(), 1000);
    },
    error: () => alert('获取全量数据失败，请重试')
  });
});

• 注意事项：后端需要支持识别print参数，返回对应筛选条件下的全量数据；如果数据量过万，前端渲染可能出现卡顿，建议切换到后端生成PDF的方案。

方案二：后端生成PDF文件下载打印 #

适合超大数据量场景，将全量数据的处理与渲染逻辑交给后端：

• 操作步骤：
  1. 点击打印按钮时，收集当前表格的所有搜索、筛选参数
  2. 调用后端PDF生成接口，传递参数
  3. 后端生成包含全量表格数据的PDF文件流，前端触发文件下载
  4. 用户打开下载的PDF直接完成打印
• 前端代码示例：

$('#myTable').on('click', '.print-pdf-btn', function(e) {
  e.preventDefault();
  const queryParams = $('#myTable').bootstrapTable('getOptions').queryParams;
  // 构造PDF请求地址
  const pdfUrl = '/api/export-table-pdf?' + $.param(queryParams);
  // 创建隐藏a标签触发下载
  const $downloadLink = $('<a href="' + pdfUrl + '" download="table-full-data.pdf"></a>');
  $('body').append($downloadLink);
  $downloadLink[0].click();
  $downloadLink.remove();
});

• 优势：完全避免前端处理大量DOM的性能问题，数据量再大也能稳定处理。

方案三：分段请求拼接打印（极端大数据量） #

如果数据量过大，一次请求全量数据会超时，可以分段请求每一页数据，拼接后再打印：

• 操作步骤：
  1. 先请求接口获取总数据量，计算出总页数
  2. 循环请求每一页的数据，按顺序拼接成完整数据集
  3. 生成临时表格或打印专用HTML，触发打印
• 注意事项：需要处理异步请求的顺序，避免数据乱序；可以添加加载提示，提升用户体验。

内容的提问来源于stack exchange，提问作者D. Barman