JS打印表格怎么设置？-建站教程-锦华智联科技

JavaScript 打印表格教程

在网页开发中，打印表格是一个常见的需求，无论是为了生成报表、存档还是方便用户线下查看，都需要将 HTML 表格内容以整洁、美观的格式打印出来。

（图片来源网络，侵删）

本文将介绍几种主流的实现方法,并分析各自的优缺点。

核心思路

无论使用哪种方法,核心思路都是一致的：

准备数据：确定表格的数据来源（静态 HTML、JavaScript 数组等）。
生成表格：将这些数据渲染成一个 <table> 结构。
触发打印：调用浏览器的打印功能（window.print()）。
优化打印样式：通过 CSS @media print 媒体查询，隐藏网页上不需要的元素（如按钮、导航栏）,并调整表格的样式以适应纸张。

使用原生 JavaScript 和 DOM 操作（最灵活）

这种方法最基础，也最灵活,适用于任何复杂的表格生成逻辑。

步骤 1：准备 HTML 结构

我们只需要一个容器来放置生成的表格,以及一个触发打印的按钮。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JavaScript 打印表格教程</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>我的数据列表</h1>
    <button id="printBtn">打印表格</button>
    <!-- 表格将在这里被动态生成 -->
    <div id="tableContainer"></div>
    <script src="script.js"></script>
</body>
</html>

步骤 2：编写 JavaScript 逻辑 (`script.js`)

document.addEventListener('DOMContentLoaded', () => {
    const printBtn = document.getElementById('printBtn');
    const tableContainer = document.getElementById('tableContainer');
    // 1. 准备数据
    const tableData = [
        { id: 1, name: '张三', age: 28, city: '北京' },
        { id: 2, name: '李四', age: 32, city: '上海' },
        { id: 3, name: '王五', age: 24, city: '广州' },
        { id: 4, name: '赵六', age: 45, city: '深圳' },
    ];
    // 2. 生成表格函数
    function generateTable(data) {
        // 创建 table, thead, tbody 元素
        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');
        // 创建表头
        const headerRow = document.createElement('tr');
        const headers = ['ID', '姓名', '年龄', '城市'];
        headers.forEach(headerText => {
            const th = document.createElement('th');
            th.textContent = headerText;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        // 创建表体
        data.forEach(rowData => {
            const row = document.createElement('tr');
            Object.values(rowData).forEach(text => {
                const td = document.createElement('td');
                td.textContent = text;
                row.appendChild(td);
            });
            tbody.appendChild(row);
        });
        // 组装表格
        table.appendChild(thead);
        table.appendChild(tbody);
        table.className = 'data-table'; // 添加一个类名，方便后续用CSS样式化
        return table;
    }
    // 初始生成表格
    tableContainer.appendChild(generateTable(tableData));
    // 3. 绑定打印按钮事件
    printBtn.addEventListener('click', () => {
        window.print();
    });
});

步骤 3：编写打印专用 CSS (`style.css`)

这是打印效果好坏的关键，我们使用 @media print 来定义只在打印时生效的样式。

/* 屏幕上显示的样式 */
body {
    font-family: sans-serif;
    padding: 20px;
}
#tableContainer {
    margin-top: 20px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.data-table th, .data-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
.data-table th {
    background-color: #f2f2f2;
}
#printBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
/* ====================================== */
/* 打印专用样式 - 这是核心部分！ */
/* ====================================== */
@media print {
    /* 1. 隐藏不需要打印的元素 */
    body * {
        visibility: hidden; /* 先隐藏所有元素 */
    }
    #tableContainer, #tableContainer * {
        visibility: visible; /* 再只显示表格及其内部元素 */
    }
    #tableContainer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    #printBtn {
        display: none; /* 隐藏按钮 */
    }
    /* 2. 优化表格打印样式 */
    .data-table {
        border: 1px solid black;
        width: 100%;
        page-break-inside: avoid; /* 避免表格分页时被切断 */
    }
    .data-table th, .data-table td {
        border: 1px solid black;
        padding: 6px;
    }
    .data-table th {
        background-color: #e0e0e0;
        -webkit-print-color-adjust: exact; /* 确保背景色在打印时也能显示 */
        print-color-adjust: exact;
    }
}

打印专用 CSS 技巧解析：

visibility: hidden 和 visibility: visible：这是一种非常有效的“打印显示，屏幕隐藏”技巧，先将所有元素隐藏,然后只让需要打印的容器及其子元素可见。
page-break-inside: avoid：对于长表格，这个属性非常重要，可以防止表格行或表格本身在页面中间被分割,保证表格块的完整性。
-webkit-print-color-adjust: exact 和 print-color-adjust: exact：默认情况下，浏览器为了节省墨水可能会忽略背景色,使用这个属性可以强制打印背景色。

使用库 - `Print.js`（推荐，更简单）

对于更复杂的需求，或者希望快速实现，使用专门的库是更好的选择。Print.js 是一个轻量级、功能强大的打印库，特别擅长打印 HTML 内容。

步骤 1：引入 Print.js

你可以通过 CDN 引入,或者下载后本地引入。

<!-- 在你的 HTML head 中引入 -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">

步骤 2：修改 HTML

将需要打印的表格部分用一个 div 包裹起来，并赋予一个 id。

<!-- ... 其他 HTML ... -->
<button id="printBtn">使用 Print.js 打印</button>
<!-- 用一个 div 包裹要打印的表格 -->
<div id="printArea">
    <h2>销售报表 - 2025年10月</h2>
    <table id="myTable">
        <thead>
            <tr>
                <th>产品</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>笔记本电脑</td>
                <td>10</td>
                <td>5999</td>
                <td>59990</td>
            </tr>
            <tr>
                <td>无线鼠标</td>
                <td>50</td>
                <td>99</td>
                <td>4950</td>
            </tr>
        </tbody>
    </table>
</div>
<!-- ... 其他 HTML ... -->

步骤 3：编写 JavaScript 调用库

document.getElementById('printBtn').addEventListener('click', () => {
    printJS({
        printable: 'printArea', // 要打印的元素的 ID
        type: 'html',           // 打印类型，html
        targetStyles: ['*']     // 打印时保留所有元素的样式
    });
});

Print.js 的优点：

简单易用：几行代码就能实现打印功能。
样式保留：能很好地保留原始 CSS 样式，包括 @media print 规则。
功能丰富：支持打印 JSON 数据、PDF 文件、图片等。
可定制性：可以自定义打印预览窗口的标题、是否显示 URL 等。

导出为 Excel（更常见的“打印”替代方案）

在很多业务场景中，用户需要的“打印”实际上是想把数据导出为 Excel 文件进行编辑或存档,这比浏览器打印更实用。

我们可以使用一个非常流行的库 SheetJS (也叫 xlsx) 来实现。

步骤 1：引入 SheetJS

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

步骤 2：修改 HTML 和 JavaScript

<!-- ... 其他 HTML ... -->
<button id="exportBtn">导出为 Excel</button>
<!-- ... 表格 ... -->

document.getElementById('exportBtn').addEventListener('click', () => {
    // 1. 获取表格元素
    const table = document.getElementById('myTable');
    // 2. 使用 SheetJS 将表格转换为工作簿
    const workbook = XLSX.utils.table_to_book(table);
    // 3. 生成 Excel 文件并下载
    // 第一个参数是文件名，第二个参数是工作簿对象
    XLSX.writeFile(workbook, '销售报表.xlsx');
});

导出 Excel 的优点：

用户友好：用户获得的是一个可编辑的文件,而不是一个不可编辑的打印预览。
功能强大：可以轻松处理大量数据，并且可以在 Excel 中进行进一步的分析和计算。
跨平台：Excel 是全球通用的办公软件。

总结与对比

方法	优点	缺点	适用场景
原生 JS + CSS	无需依赖库，轻量。灵活性最高，可完全控制 DOM 和样式。	代码量相对较多。处理复杂打印逻辑（如分页、表头重复）较繁琐。	对打印样式有高度定制化要求，或项目不允许引入第三方库时。
Print.js 库	简单易用，几行代码搞定。功能完善，能很好处理样式。社区活跃，文档齐全。	引入了外部依赖。对于极端复杂的打印需求，可能需要深入研究其 API。	强烈推荐，适用于绝大多数需要打印 HTML 的场景，能极大提高开发效率。
导出 Excel	用户体验极佳，文件可编辑、可分析。是“打印”功能的强大替代方案。	并非真正的浏览器打印。需要额外引入库。	当用户的主要目的是获取、编辑或分析数据时，这是最佳选择。

给你的建议：

如果只是想让用户快速打印一个页面上的表格，并且希望样式好看，直接使用 Print.js。
如果用户需要拿走数据进行后续处理，优先考虑导出为 Excel。
如果你对打印有非常特殊的要求，或者想深入理解其原理，可以尝试用原生 JavaScript 实现。

JS打印表格怎么设置？