jquery 实现网页打印pdf-网页设计-锦华智联科技

使用 CSS 控制打印样式：定义一个专门的打印样式表，让浏览器在打印时只显示你想要的内容，并隐藏不需要的元素（如导航栏、广告等）。
调用浏览器的打印功能：使用 window.print() 方法，这会打开浏览器的“打印”对话框。
在打印对话框中选择“另存为 PDF”：用户在打印预览中，将目标打印机/目标选择为“另存为 PDF”或“Microsoft Print to PDF”等虚拟打印机,然后保存即可。

下面我将分步详细讲解这个过程，并提供一个更高级的解决方案——使用库（如 html2canvas 和 jsPDF）直接在网页上生成 PDF 文件。

（图片来源网络，侵删）

标准打印（推荐，简单、免费、用户体验好）

这是最简单、最通用的方法，用户体验也很好，因为用户可以在打印预览中调整布局、页边距等。

步骤 1: 准备 HTML 结构

假设你的网页结构如下，你只想打印 <div id="print-area"> 内的内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery 打印 PDF 示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>导航栏 1 | 导航栏 2 | 导航栏 3</nav>
    </header>
    <main>
        <h2>文章标题</h2>
        <p>这里是网页的正文内容...</p>
        <!-- 这是您希望打印的区域 -->
        <div id="print-area">
            <h3>打印专用标题</h3>
            <p>这是专门用于打印到 PDF 的内容，它包含了所有必要的图表、表格和数据。</p>
            <img src="https://via.placeholder.com/600x200" alt="示例图片">
            <p>打印完成后，请记得在打印预览中选择“另存为 PDF”。</p>
        </div>
        <p>这里是网页的更多内容，这部分不会被打印。</p>
    </main>
    <footer>
        <p>&copy; 2025 我的公司</p>
    </footer>
    <!-- 打印按钮 -->
    <button id="print-btn">打印此区域为 PDF</button>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入自定义脚本 -->
    <script src="script.js"></script>
</body>
</html>

步骤 2: 编写 CSS 样式

创建一个 style.css 文件，并添加一个专门针对打印的媒体查询 @media print。

/* style.css */
/* 普通网页样式 */
body {
    font-family: sans-serif;
    line-height: 1.6;
}
header, footer, nav {
    background-color: #f4f4f4;
    padding: 1em;
    text-align: center;
}
#print-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#print-btn:hover {
    background-color: #0056b3;
}
/* ----------------- 关键部分：打印样式 ----------------- */
@media print {
    /* 1. 隐藏所有不需要打印的元素 */
    body > *:not(#print-area) {
        display: none !important;
    }
    /* 2. 确保打印区域显示 */
    body {
        display: block !important;
    }
    #print-area {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        box-shadow: none !important;
    }
    /* 3. (可选) 移除打印区域的背景色或边框 */
    #print-area {
        background: white !important;
        border: none !important;
    }
    /* 4. (可选) 添加页眉或页脚 */
    @page {
        margin: 2cm;
    }
}

步骤 3: 编写 jQuery 代码

创建一个 script.js 文件，为按钮绑定点击事件，触发 window.print()。

（图片来源网络，侵删）

// script.js
$(document).ready(function() {
    // 当点击打印按钮时
    $("#print-btn").on("click", function() {
        // 调用浏览器的打印功能
        window.print();
    });
});

如何使用：

用户点击“打印此区域为 PDF”按钮。
浏览器弹出打印预览窗口。
在打印预览的“打印机”或“目标”选项中，选择“另存为 PDF”、“Microsoft Print to PDF”或系统类似的虚拟打印机。
点击“保存”,选择保存位置和文件名即可。

使用库生成 PDF（高级，无需用户操作）

如果你希望点击按钮后，直接在后台生成 PDF 文件并下载，而无需弹出打印对话框，那么你需要使用 JavaScript 库，最常用的组合是 html2canvas + jsPDF。

html2canvas: 将指定的 HTML 元素（DOM）转换成一张图片（Canvas）。
jsPDF: 一个强大的客户端 JavaScript 库，用于生成 PDF 文件。

步骤 1: 安装/引入库

你可以通过 CDN 或 npm 安装，这里使用 CDN 方式，在你的 HTML 文件中引入它们。

<!-- 在 jQuery 之后引入这两个库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

步骤 2: 修改 HTML 和 CSS

HTML 结构和方案一基本一样，CSS 也基本一样，但 @media print 部分不再需要,因为我们不是调用浏览器打印。

（图片来源网络，侵删）

/* style.css (方案二的简化版) */
body {
    font-family: sans-serif;
    line-height: 1.6;
}
#print-area {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    width: 800px; /* 可以设定一个固定宽度，方便计算PDF尺寸 */
}
#generate-pdf-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

步骤 3: 编写 jQuery/JavaScript 代码

// script.js (方案二)
$(document).ready(function() {
    $("#generate-pdf-btn").on("click", async function() {
        const button = $(this);
        button.prop('disabled', true); // 禁用按钮，防止重复点击
        button.text('正在生成PDF...');
        const input = document.getElementById('print-area');
        try {
            // 1. 使用 html2canvas 将 DOM 元素转换为 canvas
            const canvas = await html2canvas(input, {
                scale: 2, // 提高分辨率，使生成的图片更清晰
                useCORS: true, // 如果图片有跨域问题，需要这个选项
                logging: false, // 关闭日志
            });
            // 2. 获取 canvas 的图片数据
            const imgData = canvas.toDataURL('image/png');
            // 3. 创建 jsPDF 实例
            // 'p' 代表纵向 (portrait), 'mm' 代表毫米, 'a4' 是纸张大小
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF('p', 'mm', 'a4');
            // 4. 计算图片在 A4 纸中的尺寸
            // A4 纸的尺寸是 210mm x 297mm
            const imgWidth = 210; // A4 宽度
            const pageHeight = 297; // A4 高度
            const imgHeight = (canvas.height * imgWidth) / canvas.width;
            let heightLeft = imgHeight;
            let position = 0;
            // 5. 将图片添加到 PDF 的第一页
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
            // 6. 如果图片高度超过一页，则添加新页
            while (heightLeft >= 0) {
                position = heightLeft - imgHeight;
                pdf.addPage();
                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
            }
            // 7. 保存 PDF 文件
            pdf.save('document.pdf');
        } catch (error) {
            console.error('生成PDF时出错:', error);
            alert('生成PDF失败，请检查控制台。');
        } finally {
            // 恢复按钮状态
            button.prop('disabled', false);
            button.text('生成并下载PDF');
        }
    });
});

如何使用：

用户点击“生成并下载PDF”按钮。
脚本会静默地将 #print-area 区域转换成图片，然后打包成 PDF 文件。
浏览器会自动触发下载，保存名为 document.pdf 的文件。

方案对比

特性	标准打印	库生成
实现复杂度	非常简单，只需 CSS 和 `window.print()`	较复杂，需要引入额外库，代码量多
用户体验	好，用户可以在打印预览中调整设置	一般，无法预览，生成过程可能较慢，且页面可能被冻结
样式控制	非常强大，通过 `@media print` 可以精确控制打印布局	有限，本质是截图，受原始 CSS 和渲染限制
跨域问题	无	有，`html2canvas` 截取的图片有跨域资源，需处理
适用场景	报告、发票、文章等标准文档的打印	、需要自动化流程、不希望用户干预的场景

总结与建议

对于绝大多数场景，强烈推荐【方案一：标准打印】，它简单、可靠、用户体验好，并且是 Web 打印的标准做法。
只有当你有特殊需求，比如需要程序化地批量生成 PDF，或者不希望用户看到打印预览时，才考虑使用【方案二：库生成】，但要注意它的潜在问题，如性能、跨域和样式失真。