Bootstrap Table 打印功能实现：print 插件自定义打印样式
项目地址: https://gitcode.com/gh_mirrors/bo/bootstrap-table 你是否还在为前端表格打印样式错乱、内容缺失而烦恼？作为数据可视化场景中的高频需求，表格打印往往面临格式不一致、样式丢失、分页错乱三大痛点。本文将系统讲解 Bootstrap Table 的 print 插件核心功能，通过 7 个实战案例和 3 类高级样式定制方案，帮助开发者彻底解决打印难题，实现专业级报表输出。
读完本文你将掌握：
- print 插件的基础集成与配置方法
- 5 种打印样式自定义技巧（含企业级报表模板）
- 复杂场景解决方案（合并单元格/动态数据/多主题适配）
- 性能优化与浏览器兼容性处理方案
一、插件基础：从集成到核心原理
1.1 快速上手（5 分钟集成）
Bootstrap Table 的 print 插件通过在工具栏添加打印按钮，实现表格数据的格式化输出。国内环境推荐使用 BootCDN 引入资源：
<!-- 引入 Bootstrap Table 核心库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.22.1/bootstrap-table.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.22.1/bootstrap-table.min.js"></script>
<!-- 引入 print 插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.22.1/extensions/print/bootstrap-table-print.min.js"></script>
基础初始化代码（含打印按钮配置）：
<table id="printTable"
data-toggle="table"
data-url="/api/data"
data-show-print="true" <!-- 显示打印按钮 -->
data-print-styles='["https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"]'>
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">名称</th>
<th data-field="price" data-print-formatter="priceFormatter">价格</th>
</tr>
</thead>
</table>
<script>
// 自定义打印格式化器：添加货币符号
function priceFormatter(value) {
return `¥${parseFloat(value).toFixed(2)}`;
}
</script>
1.2 核心工作流程
print 插件的打印流程包含 4 个关键步骤，通过 Mermaid 流程图直观展示：
二、配置详解：11 个核心参数全解析
2.1 表格级配置项
| 参数名 | 类型 | 默认值 | 实战用途 |
|---|---|---|---|
| showPrint | Boolean | false | 控制打印按钮显示 |
| printAsFilteredAndSortedOnUI | Boolean | true | 是否使用当前UI的筛选排序状态 |
| printSortColumn | String | undefined | 打印专用排序字段（如"createTime"） |
| printSortOrder | String | "asc" | 排序方向（"asc"/"desc"） |
| printStyles | Array | [] | 打印页面加载的样式表数组 |
| printPageBuilder | Function | 默认模板 | 自定义打印页面结构 |
2.2 列级配置项（解决列控制难题）
| 参数名 | 类型 | 应用场景 |
|---|---|---|
| data-print-ignore | Boolean | 隐藏打印无关列（如操作按钮列） |
| data-print-filter | String | 打印时筛选特定值（如状态列只打印"已审核"） |
| data-print-formatter | Function | 打印专用格式化（如日期转换、单位换算） |
实战示例：复杂表格的打印列控制
<table data-toggle="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">产品名称</th>
<th data-field="stock"
data-print-filter="100">库存（仅打印库存>100的记录）</th>
<th data-field="operate"
data-print-ignore="true">操作（打印时隐藏）</th>
</tr>
</thead>
</table>
三、样式定制：从基础到企业级报表
3.1 内置样式方案对比
print 插件提供 3 种基础样式加载方式，适用不同场景：
| 方案 | 实现代码 | 优势 | 适用场景 |
|---|---|---|---|
| 默认样式 | 无需配置 | 零代码 | 快速预览 |
| Bootstrap 样式 | data-print-styles='["https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"]' | 样式统一 | 保持与页面风格一致 |
| 自定义样式 | data-print-styles='["/css/print-report.css"]' | 高度定制 | 企业级报表 |
3.2 高级样式定制（5 个实用技巧）
技巧1：定制页眉页脚（含公司Logo）
通过重写 printPageBuilder 方法实现企业报表头部：
$('#printTable').bootstrapTable({
printPageBuilder: function(table, styles) {
return `
<html>
<head>${styles}</head>
<body>
<div style="text-align: center; margin-bottom: 20px;">
<img src="https://company.com/logo.png" style="height: 60px;">
<h3>2023年度销售报表</h3>
<p>生成日期: ${new Date().toLocaleDateString()}</p>
</div>
${table}
<div style="text-align: right; margin-top: 40px;">
<p>审核人: ______________</p>
</div>
</body>
</html>
`;
}
});
技巧2：控制分页与纸张方向
通过 CSS @page 规则定制打印布局：
/* print-report.css 中定义 */
@page {
size: A4 landscape; /* 横向打印 */
margin: 1.5cm; /* 页边距 */
/* 页眉页脚内容 */
@top-center {
content: "内部文件";
color: #666;
font-size: 10pt;
}
@bottom-right {
content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
}
}
/* 表格标题不跨页 */
h3 {
page-break-before: avoid;
}
/* 防止表格行跨页断裂 */
tr {
page-break-inside: avoid;
}
技巧3：Zebra Striping（斑马线效果）
为打印表格添加交替行背景色，提升可读性：
/* 打印专用样式 */
@media print {
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9 !important;
}
/* 解决Bootstrap默认样式在打印中失效问题 */
.table th, .table td {
background-color: transparent !important;
}
}
技巧4：动态数据高亮（条件格式化）
结合 printFormatter 实现数据阈值高亮：
// 库存预警格式化器：低于10时标红
function stockFormatter(value) {
const cls = value < 10 ? 'text-danger font-weight-bold' : '';
return `<span class="${cls}">${value}</span>`;
}
<th data-field="stock"
data-print-formatter="stockFormatter">库存</th>
技巧5：合并单元格完美适配
print 插件原生支持合并单元格打印，需确保表格初始化时正确配置：
// 初始化合并单元格
$('#printTable').bootstrapTable('mergeCells', {
index: 0, // 起始行
field: 'name', // 合并列
rowspan: 3 // 合并行数
});
四、实战案例：解决 5 类复杂场景
案例1：财务报表打印（含多级表头）
财务数据常包含多级表头，需特殊处理打印结构：
<table data-toggle="table"
data-show-print="true"
data-print-styles='["https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css", "/css/finance-print.css"]'>
<thead>
<tr>
<th rowspan="2" data-field="date">日期</th>
<th colspan="3" data-align="center">收入</th>
<th colspan="3" data-align="center">支出</th>
</tr>
<tr>
<th data-field="revenue.cash">现金</th>
<th data-field="revenue.card">刷卡</th>
<th data-field="revenue.total">合计</th>
<th data-field="expense.operate">运营</th>
<th data-field="expense.tax">税费</th>
<th data-field="expense.total">合计</th>
</tr>
</thead>
</table>
案例2：大数据量分页打印
当表格数据超过 100 行时，优化打印性能的配置方案：
{
showPrint: true,
printAsFilteredAndSortedOnUI: false, // 使用原始数据
printSortColumn: 'date', // 按日期排序
// 自定义数据处理：仅打印前200条
doPrint: function(data) {
const limitedData = data.slice(0, 200); // 限制打印数据量
this._super(limitedData); // 调用原始打印方法
}
}
案例3：多主题适配（Bootstrap 3/4/5）
通过动态加载不同主题的样式表，实现跨版本兼容：
// 根据当前Bootstrap版本选择打印样式
const bsVersion = window.bootstrap ? '5' : '3';
const printStyles = [
`https://cdn.bootcdn.net/ajax/libs/bootstrap/${bsVersion}/css/bootstrap.min.css`,
'/css/custom-print.css'
];
$('#printTable').bootstrapTable({
showPrint: true,
printStyles: printStyles
});
案例4：嵌套子表格打印
处理父子表结构的打印方案：
// 自定义打印页面构建器：包含子表格
function customPageBuilder(table, styles) {
// 获取选中行的子表格数据
const selected = $('#printTable').bootstrapTable('getSelections');
let childTables = '';
selected.forEach(row => {
childTables += buildChildTable(row.details); // 构建子表格HTML
});
return `
<html>
<head>${styles}</head>
<body>
<h3>主表数据</h3>
${table}
<h3 style="margin-top: 30px;">明细数据</h3>
${childTables}
</body>
</html>
`;
}
案例5：移动端打印适配
针对小屏设备优化的打印配置：
{
showPrint: true,
// 根据设备类型动态调整打印样式
printStyles: function() {
const isMobile = window.innerWidth < 768;
return isMobile ? [
'https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css',
'/css/mobile-print.css'
] : [
'https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css',
'/css/desktop-print.css'
];
}()
}
五、性能优化与兼容性
5.1 打印性能优化（大数据场景）
当处理 1000+ 行数据打印时，采用以下优化策略：
- 数据分页处理：仅打印当前页数据
data-print-as-filtered-and-sorted-on-ui: true
- 延迟加载样式表：只加载必要的打印样式
printStyles: ['/css/print-only.css'] // 精简版样式
- 虚拟滚动数据处理：结合
printAsFilteredAndSortedOnUI: false使用原始数据切片
5.2 浏览器兼容性解决方案
| 浏览器 | 问题 | 解决方案 |
|---|---|---|
| Chrome | 打印预览空白 | 确保 printPageBuilder 中正确设置 document.close() |
| Firefox | 样式加载延迟 | 使用 setTimeout(startPrint, 500) 延迟打印触发 |
| Safari | 表格宽度异常 | 强制设置表格宽度 table { width: 100% !important; } |
| IE11 | 不支持箭头函数 | 使用 babel 转译插件代码 |
通用兼容代码：
// 兼容处理：等待样式加载完成
function startPrintWithDelay(win, delay = 300) {
if (navigator.userAgent.indexOf('Firefox') > -1) {
setTimeout(() => {
win.focus();
win.print();
}, delay);
} else {
win.focus();
win.print();
}
}
六、高级功能：插件源码级扩展
6.1 自定义打印按钮图标与位置
通过重写工具栏按钮配置实现：
{
icons: {
print: 'bi bi-printer-fill' // 使用Bootstrap Icons
},
// 自定义工具栏按钮顺序
buttonsOrder: ['print', 'refresh', 'columns']
}
6.2 打印前数据二次处理
扩展 doPrint 方法实现复杂数据转换：
// 扩展BootstrapTable原型
$.BootstrapTable = class extends $.BootstrapTable {
doPrint(data) {
// 打印前数据增强：添加计算字段
const enhancedData = data.map(row => ({
...row,
profit: row.revenue - row.cost // 计算利润
}));
// 调用原始打印方法
super.doPrint(enhancedData);
}
}
6.3 导出打印PDF功能集成
结合 jsPDF 实现打印转PDF功能：
// 自定义打印处理器
function pdfPrintHandler() {
const table = document.getElementById('printTable');
// 使用jsPDF将表格转为PDF
html2pdf().from(table).save('报表.pdf');
}
// 替换默认打印事件
$('#printTable').on('click', '.btn-print', function(e) {
e.preventDefault();
pdfPrintHandler();
});
七、总结与最佳实践
7.1 必知的 8 个最佳实践
- 样式隔离：始终使用
@media print包裹打印样式 - 资源本地化：将关键样式表下载到本地，避免CDN加载失败
- 打印预览：在开发环境中添加打印预览按钮加速调试
- 数据验证：打印前验证数据完整性，避免空值导致的布局错乱
- 字体嵌入：在CSS中嵌入必要字体，确保跨设备显示一致
- 测试矩阵：在3种以上浏览器中测试打印效果
- 错误处理：添加打印失败的友好提示
- 性能监控：大数据打印时添加加载指示器
7.2 企业级报表模板（可直接复用）
提供完整的企业级打印样式模板（print-enterprise.css）：
/* 基础样式重置 */
* {
box-sizing: border-box;
-webkit-print-color-adjust: exact !important; /* 确保打印时颜色正确 */
print-color-adjust: exact !important;
}
/* 报表容器 */
.report-container {
width: 210mm; /* A4宽度 */
min-height: 297mm; /* A4高度 */
margin: 0 auto;
padding: 15mm;
font-family: "SimSun", "宋体", serif; /* 确保中文正常显示 */
}
/* 表格样式 */
.report-table {
width: 100%;
border-collapse: collapse;
font-size: 10.5pt;
}
.report-table th {
background-color: #f2f2f2 !important;
border: 1px solid #ddd !important;
padding: 6px 8px;
text-align: center;
font-weight: bold;
}
.report-table td {
border: 1px solid #ddd !important;
padding: 6px 8px;
vertical-align: middle;
}
/* 标题样式 */
.report-title {
font-size: 16pt;
text-align: center;
margin-bottom: 15px;
font-weight: bold;
}
.report-subtitle {
font-size: 11pt;
text-align: center;
color: #666;
margin-bottom: 25px;
}
/* 页脚样式 */
.report-footer {
margin-top: 40px;
font-size: 9pt;
color: #666;
border-top: 1px solid #ccc;
padding-top: 10px;
}
通过本文介绍的技术方案，开发者可以快速实现专业级的表格打印功能。无论是简单的数据清单还是复杂的企业报表，Bootstrap Table 的 print 插件都能提供灵活而强大的支持。建议结合实际项目需求，优先采用自定义 printPageBuilder 和专用样式表的方案，既能保证打印效果的专业性，又能最大化复用现有前端资源。
如果本文对你解决打印难题有帮助，请点赞收藏并关注作者，下期将带来《Bootstrap Table 与 Excel 无缝集成》的深度教程，敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
