Laravel下Yajra DataTables打印导出输入值丢失及打印布局自定义问题

项目背景 #

• 开发身份：PHP与Laravel开发新手，开发面向供应商的企业未完成采购订单展示应用
• 底层数据源：企业内部使用SAP B1 + Hana作为数据库，已通过ODBC完成连接，可正常拉取数据到Web应用展示
• 前端表格实现：使用Yajra DataTables实现分页、筛选、排序功能，对应视图文件为PoTableView.blade.php，已完成基础表格功能开发

初始遇到的核心问题 #

1. 点击打印或导出按钮时，Pick Quantity 列的输入框值会显示为空
2. 打印时需要隐藏指定列，支持自定义打印布局

问题排查与解决过程 #

• 最初尝试新增自定义按钮跳转新视图的方案，未生效
• 第一阶段优化：完成输入值的基础打印适配，但出现新问题：用户修改输入框值后，打印仍读取初始渲染的旧值
• 最终解决方案：给每个输入框设置唯一ID，新增onchange事件实时同步输入框的value属性，解决新旧值不同步的问题；同时配置DataTables打印参数实现指定列隐藏和自定义布局。

完整实现代码参考 #

1. 视图列渲染代码（Blade模板） #

{{-- Pick Quantity 列输入框示例 --}}
<td>
  <input 
    type="number" 
    id="pick_qty_{{ $purchase_order->id }}" 
    class="pick-qty-input no-export" 
    value="{{ $purchase_order->open_quantity }}" 
    onchange="syncInputValue(this)"
  >
</td>
{{-- 需要隐藏的打印列可添加自定义类，比如class="no-print" --}}
<td class="no-print">
  {{-- 内部操作列内容，打印时隐藏 --}}
</td>

2. JS功能代码 #

// 输入框value属性同步函数，确保修改后的值能被DataTables读取
function syncInputValue(el) {
  el.setAttribute('value', el.value);
}

// Yajra DataTables 初始化配置
$(document).ready(function() {
  $('#purchase-order-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{{ route("purchase-orders.data") }}',
    columns: [
      // 其他业务列配置省略
      { data: 'pick_quantity', name: 'pick_quantity', orderable: false },
      { data: 'action', name: 'action', orderable: false, className: 'no-print' }
    ],
    dom: 'Bfrtip',
    buttons: [
      {
        extend: 'print',
        exportOptions: {
          // 排除带no-print类的列不打印
          columns: ':not(.no-print)',
          format: {
            body: function (data, row, column, node) {
              // 适配输入框列的值读取，假设Pick Quantity列索引为4
              if (column === 4) {
                return $(node).find('input').val();
              }
              return data;
            }
          }
        },
        // 自定义打印页面布局
        customize: function (printWindow) {
          // 打印页头部添加标题
          $(printWindow.document.body)
            .css('font-size', '12px')
            .prepend('<h2>未完成采购订单清单</h2><hr style="margin: 1rem 0">');
          // 自定义打印页表格样式
          $(printWindow.document.body).find('table')
            .addClass('compact')
            .css('font-size', 'inherit');
        }
      },
      'excel',
      'csv'
    ]
  });
});

内容的提问来源于stack exchange，提问作者Will Nguyen