hiprint开源工具库：简化HTML打印流程的完整解决方案

1. hiprint项目概述与核心价值

hiprint是一个专注于简化HTML打印流程的开源工具库，它的核心使命是解决传统网页打印中的各种痛点问题。在实际项目中，我们经常遇到这样的场景：精心设计的网页在打印预览时布局错乱，或者打印出来的效果与屏幕显示大相径庭。hiprint通过提供一套完整的打印解决方案，让开发者能够轻松实现所见即所得的打印效果。

这个工具特别适合需要处理以下场景的开发团队：

• 电商平台的订单打印
• 企业ERP系统中的报表输出
• 医疗机构的处方单据打印
• 教育系统的证书生成
• 任何需要精确控制打印格式的Web应用

2. 环境准备与基础配置

2.1 项目依赖安装

要开始使用hiprint，首先需要确保你的开发环境已经准备好必要的依赖。对于基于npm的项目，可以通过以下命令安装hiprint：

bash复制npm install hiprint --save

如果你使用的是传统HTML项目，可以直接从官网下载打包好的资源文件：

html复制<!-- 引入hiprint核心CSS -->
<link rel="stylesheet" href="path/to/hiprint.css">

<!-- 引入hiprint核心JS -->
<script src="path/to/hiprint.bundle.js"></script>

2.2 初始化打印模板

hiprint的核心概念是"模板"——你可以预先定义好打印内容的布局和样式。以下是一个基础模板的初始化示例：

javascript复制// 创建打印模板
var template = new hiprint.PrintTemplate({
    template: {
        panels: [
            {
                width: 210,
                height: 297,
                paperFooter: 10,
                paperHeader: 10,
                printElements: [
                    {
                        options: {
                            left: 10,
                            top: 10,
                            width: 190,
                            height: 50,
                            title: "公司抬头",
                            field: "companyName",
                            textAlign: "center",
                            fontSize: 18
                        },
                        type: "text"
                    }
                ]
            }
        ]
    }
});

3. 实现HTML内容打印

3.1 普通HTML打印方案

hiprint提供了多种打印HTML内容的方式，最简单的是直接打印现有DOM元素。假设你有一个需要打印的div：

html复制<div id="print-content">
    <h1>销售订单</h1>
    <table>
        <!-- 订单内容 -->
    </table>
</div>

对应的JavaScript调用非常简单：

javascript复制// 获取打印内容
var printElement = document.getElementById('print-content');

// 创建打印任务
hiprint.print(printElement, {
    title: '销售订单',  // 打印任务名称
    style: '@page { size: A4; margin: 0; }',  // 自定义页面样式
    beforePrint: function() {
        console.log('打印前回调');
    },
    afterPrint: function() {
        console.log('打印后回调');
    }
});

3.2 动态内容打印

在实际业务中，我们经常需要打印动态生成的内容。hiprint支持通过模板引擎渲染数据后再打印：

javascript复制// 准备数据
var orderData = {
    orderNo: '20230815001',
    customer: '张三',
    items: [
        { name: '商品A', price: 100, quantity: 2 },
        { name: '商品B', price: 200, quantity: 1 }
    ],
    total: 400
};

// 使用模板打印
var templateHtml = `
    <div class="order-print">
        <h2>订单号: {{orderNo}}</h2>
        <p>客户: {{customer}}</p>
        <table>
            {{#each items}}
            <tr>
                <td>{{name}}</td>
                <td>{{price}}元 × {{quantity}}</td>
            </tr>
            {{/each}}
        </table>
        <p>总计: {{total}}元</p>
    </div>
`;

// 渲染并打印
hiprint.printTemplate(templateHtml, orderData);

4. 高级打印功能实现

4.1 分页控制与页眉页脚

对于多页打印，hiprint提供了完善的分页控制功能。以下示例展示了如何添加页眉页脚：

javascript复制var template = new hiprint.PrintTemplate({
    template: {
        panels: [
            {
                width: 210,
                height: 297,
                paperFooter: 20,  // 页脚高度
                paperHeader: 20,  // 页眉高度
                printElements: [
                    // 页眉元素
                    {
                        options: {
                            left: 0,
                            top: 0,
                            width: 210,
                            height: 20,
                            field: "header",
                            textAlign: "center"
                        },
                        type: "text"
                    },
                    // 正文内容
                    {
                        options: {
                            left: 10,
                            top: 30,
                            width: 190,
                            height: 240,
                            field: "content",
                            content: "<div>这里是动态内容区域</div>"
                        },
                        type: "html"
                    },
                    // 页脚元素
                    {
                        options: {
                            left: 0,
                            top: 277,
                            width: 210,
                            height: 20,
                            field: "footer",
                            textAlign: "center",
                            content: "第{{pageNum}}页/共{{pageCount}}页"
                        },
                        type: "text"
                    }
                ]
            }
        ]
    }
});

4.2 打印样式优化

打印样式与屏幕样式往往需要不同的处理。hiprint允许你为打印专门定义CSS：

css复制@media print {
    body {
        margin: 0;
        padding: 0;
        background: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
    
    .page-break {
        page-break-after: always;
    }
}

在JavaScript中，你可以动态添加这些样式：

javascript复制hiprint.setPrintStyle(`
    @page {
        size: A4;
        margin: 10mm;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
    }
    
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
    }
`);

5. 常见问题与解决方案

5.1 打印内容截断问题

当打印内容超出页面边界时，可能会出现截断现象。解决方案包括：

1. 确保设置了正确的纸张尺寸：

javascript复制hiprint.setPaperSize('A4'); // 或 'letter' 等标准尺寸

2. 检查元素的外边距和内边距：

css复制.print-content {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3. 使用page-break-inside: avoid防止元素被分割：

css复制.table-row {
    page-break-inside: avoid;
}

5.2 图片打印模糊问题

高分辨率打印时，图片容易出现模糊。解决方法：

1. 使用矢量图(SVG)替代位图
2. 确保图片原始分辨率足够高
3. 在CSS中设置正确的打印尺寸：

css复制@media print {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

4. 使用hiprint的图片优化选项：

javascript复制{
    type: "image",
    options: {
        src: "path/to/image.png",
        width: 100,
        height: 100,
        printQuality: "high"  // 设置为高质量打印
    }
}

5.3 跨浏览器兼容性问题

不同浏览器对打印的支持存在差异，hiprint已经处理了大部分兼容性问题，但仍需注意：

1. Chrome/Firefox推荐使用最新版本
2. IE浏览器建议使用IE11及以上版本
3. 对于特殊样式，可以使用浏览器前缀：

css复制@media print {
    -webkit-print-color-adjust: exact; /* Chrome/Safari */
    print-color-adjust: exact; /* 标准属性 */
}

4. 测试时应在多个浏览器中进行打印预览

6. 性能优化与最佳实践

6.1 大数据量打印优化

当需要打印大量数据时，直接渲染所有内容可能导致性能问题。解决方案：

1. 分批次渲染：

javascript复制function printLargeData(data, batchSize = 100) {
    let current = 0;
    
    function printBatch() {
        const batch = data.slice(current, current + batchSize);
        if (batch.length === 0) return;
        
        renderBatch(batch);
        current += batchSize;
        
        // 添加分页符
        if (current < data.length) {
            addPageBreak();
            setTimeout(printBatch, 100); // 给浏览器喘息时间
        }
    }
    
    printBatch();
}

2. 使用虚拟滚动技术只渲染可视区域内容
3. 在服务器端生成PDF再打印

6.2 模板复用与组件化

对于频繁使用的打印模板，建议将其组件化：

javascript复制// 定义可复用的订单模板
function createOrderTemplate() {
    return {
        panels: [
            {
                width: 210,
                height: 297,
                printElements: [
                    // 公司LOGO
                    {
                        type: "image",
                        options: {
                            left: 10,
                            top: 10,
                            width: 50,
                            height: 50,
                            field: "companyLogo"
                        }
                    },
                    // 订单基本信息
                    {
                        type: "text",
                        options: {
                            left: 70,
                            top: 10,
                            width: 130,
                            field: "orderInfo",
                            textAlign: "right"
                        }
                    }
                ]
            }
        ]
    };
}

// 使用时
var orderTemplate = new hiprint.PrintTemplate({
    template: createOrderTemplate()
});

6.3 打印事件监控与错误处理

完善的错误处理可以提升用户体验：

javascript复制hiprint.print(element, {
    onError: function(error) {
        console.error('打印错误:', error);
        alert('打印失败: ' + error.message);
    },
    onTimeout: function() {
        console.warn('打印超时');
        alert('打印机响应超时，请检查连接');
    },
    timeout: 30000 // 30秒超时
});

7. 实际案例：电商订单打印系统

7.1 需求分析

假设我们需要为电商平台开发一个订单打印功能，要求：

• 打印订单基本信息（订单号、日期、客户信息）
• 打印商品清单（包含图片、名称、价格、数量）
• 自动计算总金额
• 支持快递单打印
• 多联打印（客户联、仓库联）

7.2 实现方案

首先设计订单数据结构：

javascript复制var orderData = {
    orderId: "20230815-001",
    orderDate: "2023-08-15",
    customer: {
        name: "李四",
        address: "北京市朝阳区...",
        phone: "13800138000"
    },
    items: [
        {
            sku: "SPU001",
            name: "无线蓝牙耳机",
            image: "/images/item1.jpg",
            price: 199,
            quantity: 2,
            subtotal: 398
        }
        // 更多商品...
    ],
    total: 796,
    paymentMethod: "支付宝",
    shippingMethod: "顺丰快递"
};

然后创建打印模板：

javascript复制var orderTemplate = new hiprint.PrintTemplate({
    template: {
        panels: [
            {
                width: 210,
                height: 297,
                printElements: [
                    // 订单标题
                    {
                        type: "text",
                        options: {
                            left: 10,
                            top: 10,
                            width: 190,
                            height: 20,
                            title: "销售订单",
                            fontSize: 16,
                            fontWeight: "bold",
                            textAlign: "center"
                        }
                    },
                    // 客户信息
                    {
                        type: "html",
                        options: {
                            left: 10,
                            top: 40,
                            width: 190,
                            height: 60,
                            content: `
                                <div class="customer-info">
                                    <p>订单号: ${orderData.orderId}</p>
                                    <p>日期: ${orderData.orderDate}</p>
                                    <p>客户: ${orderData.customer.name}</p>
                                    <p>电话: ${orderData.customer.phone}</p>
                                </div>
                            `
                        }
                    },
                    // 商品表格
                    {
                        type: "table",
                        options: {
                            left: 10,
                            top: 110,
                            width: 190,
                            height: 150,
                            fields: [
                                { text: "图片", field: "image", width: 40 },
                                { text: "名称", field: "name", width: 60 },
                                { text: "单价", field: "price", width: 30 },
                                { text: "数量", field: "quantity", width: 30 },
                                { text: "小计", field: "subtotal", width: 30 }
                            ],
                            data: orderData.items
                        }
                    },
                    // 总计
                    {
                        type: "text",
                        options: {
                            left: 130,
                            top: 270,
                            width: 70,
                            height: 20,
                            title: `总计: ${orderData.total}元`,
                            textAlign: "right",
                            fontWeight: "bold"
                        }
                    }
                ]
            }
        ]
    }
});

7.3 打印控制

实现打印按钮和打印预览功能：

html复制<button id="print-btn">打印订单</button>
<button id="preview-btn">打印预览</button>

<script>
document.getElementById('print-btn').addEventListener('click', function() {
    orderTemplate.print(orderData);
});

document.getElementById('preview-btn').addEventListener('click', function() {
    orderTemplate.preview(orderData);
});
</script>

8. 扩展功能与进阶用法

8.1 自定义打印插件

hiprint支持通过插件扩展功能。创建一个简单的页眉插件示例：

javascript复制// 定义页眉插件
hiprint.addPrintElementType('customHeader', function(options) {
    var $element = $('<div class="custom-header"></div>');
    
    // 应用选项
    if (options.title) {
        $element.text(options.title);
    }
    
    if (options.style) {
        $element.css(options.style);
    }
    
    return $element;
});

// 使用自定义插件
{
    type: "customHeader",
    options: {
        title: "公司专用页眉",
        style: {
            "background-color": "#f5f5f5",
            "padding": "10px",
            "text-align": "center"
        }
    }
}

8.2 与后端集成

通常打印需要后端数据支持，以下是与后端API集成的示例：

javascript复制// 获取订单数据
function fetchOrderData(orderId) {
    return fetch(`/api/orders/${orderId}`)
        .then(response => response.json())
        .catch(error => {
            console.error('获取订单数据失败:', error);
            throw error;
        });
}

// 打印订单
function printOrder(orderId) {
    fetchOrderData(orderId)
        .then(data => {
            var template = createOrderTemplate(data);
            template.print(data);
        })
        .catch(error => {
            alert('无法打印订单: ' + error.message);
        });
}

8.3 多语言支持

对于国际化应用，hiprint可以轻松实现多语言打印：

javascript复制// 多语言资源
var i18n = {
    en: {
        order: "Order",
        customer: "Customer",
        total: "Total"
    },
    zh: {
        order: "订单",
        customer: "客户",
        total: "总计"
    }
};

// 根据语言设置模板
function createLocalizedTemplate(lang) {
    return {
        panels: [
            {
                printElements: [
                    {
                        type: "text",
                        options: {
                            title: i18n[lang].order,
                            // 其他选项...
                        }
                    }
                    // 更多元素...
                ]
            }
        ]
    };
}

9. 安全与权限控制

9.1 打印权限管理

在某些系统中，需要控制哪些用户可以打印：

javascript复制// 检查打印权限
function checkPrintPermission(user) {
    return user.roles.some(role => 
        role.permissions.includes('print') ||
        role.permissions.includes('admin')
    );
}

// 安全打印函数
function securePrint(user, content) {
    if (!checkPrintPermission(user)) {
        throw new Error('无权执行打印操作');
    }
    
    hiprint.print(content, {
        onError: function(error) {
            logPrintError(user, error);
        }
    });
}

9.2 打印内容安全

确保打印内容不包含恶意代码：

javascript复制function sanitizePrintContent(html) {
    // 移除脚本标签
    html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
    
    // 移除危险属性
    html = html.replace(/ on\w+="[^"]*"/g, '');
    
    return html;
}

// 安全打印HTML
function printSafeHtml(html) {
    var cleanHtml = sanitizePrintContent(html);
    hiprint.printHtml(cleanHtml);
}

10. 调试与问题排查

10.1 打印样式调试技巧

1. 使用打印模拟模式调试样式：

javascript复制// 启用调试模式
hiprint.setDebug(true);

// 打印时会显示辅助线和边界
template.print(data);

2. 在Chrome开发者工具中使用打印模拟：

• 打开DevTools (F12)
• 切换到"渲染"标签页
• 勾选"模拟CSS媒体类型"并选择"打印"

3. 添加临时调试边框：

css复制@media print {
    * {
        outline: 1px dotted rgba(0,0,0,0.2);
    }
}

10.2 常见错误排查

1. 内容不显示：

• 检查元素是否设置了display: none或visibility: hidden
• 确认z-index没有导致元素被遮盖
• 验证数据绑定是否正确

2. 布局错乱：

• 检查盒模型计算是否正确
• 确认没有浮动元素导致的布局问题
• 验证纸张尺寸和边距设置

3. 打印对话框不弹出：

• 检查浏览器是否拦截了弹出窗口
• 确认调用打印的代码是在用户交互事件中触发（浏览器安全限制）

11. 替代方案与技术对比

11.1 主流HTML打印方案对比

11.2 如何选择合适的方案

选择打印方案时考虑以下因素：

1. 复杂度需求：

• 简单内容：window.print()或Print.js
• 复杂报表：hiprint或jsPDF

2. 环境限制：

• 纯前端：hiprint、Print.js
• 可后端：PDFKit

3. 输出格式：

• 直接打印：hiprint
• 生成PDF：jsPDF、PDFKit

4. 浏览器兼容性：

• 现代浏览器：hiprint
• 老式浏览器：window.print()

12. 未来发展与社区生态

12.1 hiprint的演进路线

根据官方文档和社区讨论，hiprint未来可能增加：

1. 更强大的模板设计器
2. 增强的PDF导出功能
3. 云端模板存储与共享
4. 与流行框架的深度集成(React/Vue组件)
5. 移动端打印优化

12.2 社区资源与学习材料

1. 官方文档：hiprint官网（假设）
2. GitHub仓库：示例代码和问题讨论
3. 社区论坛：开发者交流经验
4. Stack Overflow：常见问题解答
5. 博客教程：进阶使用技巧

13. 性能监控与优化指标

13.1 关键性能指标

监控打印性能的重要指标：

1. 模板加载时间：从初始化到准备就绪的时间
2. 渲染时间：数据绑定到内容渲染完成的时间
3. 打印响应时间：点击打印到对话框出现的时间
4. 内存使用：处理大型文档时的内存占用

13.2 优化建议

1. 模板优化：

• 减少不必要的嵌套元素
• 简化复杂的选择器
• 避免过多的绝对定位元素

2. 数据优化：

• 只加载打印必需的数据
• 分页加载大型数据集
• 预处理数据减少客户端计算

3. 资源优化：

• 压缩图片资源
• 使用CSS雪碧图减少请求
• 延迟加载非关键资源

14. 自动化测试策略

14.1 单元测试示例

使用Jest测试打印功能：

javascript复制describe('hiprint打印功能', () => {
    let printElement;
    
    beforeEach(() => {
        printElement = document.createElement('div');
        printElement.innerHTML = '<h1>测试内容</h1>';
        document.body.appendChild(printElement);
    });
    
    afterEach(() => {
        document.body.removeChild(printElement);
    });
    
    test('应该能打印DOM元素', () => {
        const spy = jest.spyOn(hiprint, 'print');
        hiprint.print(printElement);
        expect(spy).toHaveBeenCalledWith(printElement, expect.any(Object));
    });
    
    test('应该处理打印错误', () => {
        const error = new Error('模拟错误');
        hiprint.print = jest.fn(() => { throw error; });
        
        console.error = jest.fn();
        hiprint.print(printElement);
        
        expect(console.error).toHaveBeenCalledWith('打印错误:', error);
    });
});

14.2 E2E测试方案

使用Cypress进行端到端测试：

javascript复制describe('订单打印功能', () => {
    it('应该成功打印订单', () => {
        cy.visit('/orders/123');
        cy.get('.print-button').click();
        cy.window().then((win) => {
            const spy = cy.spy(win.hiprint, 'print');
            cy.get('.print-confirm').click().then(() => {
                expect(spy).to.be.called;
            });
        });
    });
});

15. 实际项目集成案例

15.1 与Vue.js集成

创建可复用的打印组件：

vue复制<template>
    <div>
        <slot></slot>
        <button @click="handlePrint">打印</button>
    </div>
</template>

<script>
export default {
    props: {
        options: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        handlePrint() {
            const content = this.$el.querySelector('.print-content') || this.$el;
            hiprint.print(content, this.options);
        }
    }
};
</script>

使用示例：

vue复制<template>
    <print-wrapper>
        <div class="print-content">
            <h2>我的可打印内容</h2>
            <!-- 更多内容... -->
        </div>
    </print-wrapper>
</template>

15.2 与React集成

创建React打印组件：

jsx复制import React, { useRef } from 'react';

const PrintComponent = ({ children, options }) => {
    const printRef = useRef(null);
    
    const handlePrint = () => {
        if (printRef.current) {
            hiprint.print(printRef.current, options);
        }
    };
    
    return (
        <div>
            <div ref={printRef}>{children}</div>
            <button onClick={handlePrint}>打印</button>
        </div>
    );
};

export default PrintComponent;

使用示例：

jsx复制<PrintComponent>
    <h2>React打印内容</h2>
    <p>这是通过hiprint打印的内容</p>
</PrintComponent>

16. 移动端适配策略

16.1 响应式打印设计

确保打印内容在不同设备上都能正常显示：

css复制/* 移动端特定样式 */
@media screen and (max-width: 768px) {
    .print-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }
    
    .print-button {
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 18px;
    }
}

16.2 移动端打印触发

移动端打印需要特殊处理：

javascript复制function setupMobilePrint() {
    if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
        // 移动端可能需要用户手势才能触发打印
        document.getElementById('print-btn').addEventListener('touchend', function(e) {
            e.preventDefault();
            printContent();
        });
    } else {
        document.getElementById('print-btn').addEventListener('click', printContent);
    }
}

17. 无障碍访问支持

17.1 打印内容无障碍优化

确保打印内容对辅助技术友好：

1. 为图片添加alt文本：

html复制<img src="logo.png" alt="公司标志">

2. 使用语义化标签：

html复制<table>
    <caption>订单商品列表</caption>
    <thead>
        <tr>
            <th scope="col">商品名称</th>
            <th scope="col">价格</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行 -->
    </tbody>
</table>

3. 提供高对比度打印样式：

css复制@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    a::after {
        content: " (" attr(href) ")";
    }
}

18. 法律与合规考量

18.1 打印内容的法律要求

在某些行业，打印内容需要满足特定合规要求：

1. 财务单据：

• 必须包含完整的税务信息
• 金额需明确标注货币单位
• 需要保留足够的空白处供手写签字

2. 医疗处方：

• 需要医生签名区域
• 药品信息必须完整准确
• 可能需要特定的免责声明

3. 法律文件：

• 页脚需包含"保密"标记
• 需要唯一的文档编号
• 可能需要见证人签字区域

18.2 用户隐私保护

处理包含个人数据的打印内容时：

1. 自动隐藏敏感信息：

javascript复制function maskSensitiveData(text) {
    // 隐藏身份证号
    return text.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2');
}

2. 提供打印预览确认：

javascript复制function printWithConfirmation(content) {
    const preview = confirm('请确认打印内容不包含敏感信息');
    if (preview) {
        hiprint.print(content);
    }
}

19. 国际化与本地化支持

19.1 多语言模板管理

使用i18n库管理多语言打印模板：

javascript复制import i18n from 'i18next';

// 初始化i18n
i18n.init({
    resources: {
        en: {
            print: {
                invoice: "Invoice",
                date: "Date"
            }
        },
        zh: {
            print: {
                invoice: "发票",
                date: "日期"
            }
        }
    }
});

// 创建本地化模板
function createLocalizedTemplate() {
    return {
        panels: [
            {
                printElements: [
                    {
                        type: "text",
                        options: {
                            title: i18n.t('print.invoice'),
                            // 其他选项...
                        }
                    }
                ]
            }
        ]
    };
}

19.2 区域特定的打印格式

适应不同地区的打印习惯：

1. 纸张尺寸：

• 北美：Letter (8.5×11英寸)
• 欧洲：A4 (210×297毫米)
• 日本：B5 (182×257毫米)

2. 日期格式：

javascript复制function formatDate(date, locale) {
    return new Intl.DateTimeFormat(locale).format(date);
}

3. 货币格式：

javascript复制function formatCurrency(amount, currency) {
    return new Intl.NumberFormat(undefined, {
        style: 'currency',
        currency: currency
    }).format(amount);
}

20. 持续集成与部署

20.1 自动化构建配置

在CI/CD流程中加入打印功能测试：

yaml复制# .github/workflows/test.yml
name: Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      
      - run: npm install
      
      - run: npm test
      
      - name: Run printing tests
        run: |
          xvfb-run -a npm run test:printing

20.2 版本升级策略

hiprint版本升级最佳实践：

1. 测试环境验证：

• 先在非生产环境测试新版本
• 验证现有模板是否兼容
• 检查性能变化

2. 渐进式部署：

• 先部署到小部分用户
• 监控错误率和性能指标
• 确认稳定后全量部署

3. 回滚计划：

• 保留旧版本构建产物
• 准备快速回滚脚本
• 记录已知问题解决方案

21. 监控与日志记录

21.1 打印操作日志

记录打印活动用于审计：

javascript复制function logPrintAction(user, content, options) {
    const logEntry = {
        timestamp: new Date(),
        userId: user.id,
        contentType: options.title || '未知',
        printer: options.printer || '默认',
        pageCount: options.pageCount || 1
    };
    
    fetch('/api/print-logs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(logEntry)
    }).catch(error => {
        console.error('日志记录失败:', error);
    });
}

21.2 错误监控集成

将打印错误接入监控系统：

javascript复制// 使用Sentry监控打印错误
hiprint.setOptions({
    onError: function(error) {
        Sentry.captureException(error);
        showErrorToUser(error);
    }
});

function showErrorToUser(error) {
    const message = {
        'PrinterNotFound': '请检查打印机连接',
        'PrintTimeout': '打印机响应超时',
        'default': '打印失败，请重试'
    }[error.code] || message.default;
    
    alert(message);
}

22. 成本分析与优化

22.1 打印成本计算

估算打印作业的成本：

javascript复制function calculatePrintCost(pages, options = {}) {
    const config = {
        bWCostPerPage: 0.05,  // 黑白单页成本
        colorCostPerPage: 0.25, // 彩色单页成本
        duplexDiscount: 0.4    // 双面打印折扣
    };
    
    let cost = 0;
    const isColor = options.color || false;
    const isDuplex = options.duplex || false;
    
    // 基础成本
    cost = pages * (isColor ? config.colorCostPerPage : config.bWCostPerPage);
    
    // 双面打印折扣
    if (isDuplex) {
        cost *= (1 - config.duplexDiscount);
    }
    
    return Math.round(cost * 100) / 100;
}

22.2 成本节约策略

1. 默认双面打印：

javascript复制hiprint.setDefaultOptions({
    duplex: true
});

2. 墨水节省模式：

css复制@media print {
    body {
        color: #333 !important; /* 使用较浅的黑色 */
    }
    
    img {
        filter: grayscale(100%); /* 强制灰度打印 */
    }
}

3. 打印确认提示：

javascript复制function confirmBeforePrint(pages) {
    const cost = calculatePrintCost(pages);
    return confirm(`本次打印将消耗约${cost}元，确认继续吗？`);
}

23. 替代输出格式支持

23.1 生成PDF文件

除了直接打印，hiprint也支持生成PDF：

javascript复制// 生成PDF并下载
hiprint.generatePdf(printElement, {
    fileName: 'document.pdf',
    onProgress: function(progress) {
        console.log(`生成进度: ${progress}%`);
    },
    onComplete: function() {
        console.log('PDF生成完成');
    }
});

23.2 导出为图片

将打印内容导出为图片：

javascript复制// 导出为PNG
hiprint.exportToImage(printElement, {
    type: 'png',
    quality: 0.92,
    fileName: 'preview.png'
});

24. 团队协作与知识共享

24.1 打印模板版本控制

使用Git管理打印模板：

1. 模板文件结构：

code复制/print-templates
    /invoice
        template.json
        preview.png
        README.md
    /report
        template.json
        assets/
            logo.png

2. 变更日志示例：

markdown复制## 发票模板变更历史

### 2023-08-15
- 新增税务信息区域
- 调整公司LOGO尺寸
- 优化移动端显示

### 2023-07-20
- 初始版本

24.2 团队知识库建设

建立打印相关文档：

1. 风格指南：

• 字体大小规范
• 颜色使用标准
• 边距和间距规则

2. 常见问题：

• 如何添加新打印机
• 模板调试技巧
• 性能优化建议

3. 最佳实践：

• 模板设计原则
• 数据准备指南
• 安全注意事项

25. 用户体验优化技巧

25.1 打印进度反馈

提供可视化打印进度：

javascript复制function showPrintProgress() {
    const progress = document.createElement('div');
    progress.className = 'print-progress';
    progress.innerHTML = `
        <div class="progress-bar"></div>
        <p>准备打印...</p>
    `;
    document.body.appendChild(progress);
    
    return {
        update: function(message, percent) {
            const bar = progress.querySelector('.progress-bar');
            bar.style.width = `${percent}%`;
            progress.querySelector('p').textContent = message;
        },
        complete: function() {
            progress.remove();
        }
    };
}

// 使用示例
const progress = showPrintProgress();
hiprint.print(content, {
    onProgress: function(state) {
        progress.update(state.message, state.percent);
    },
    onComplete: function() {
        progress.com