使用React如何静默打印页面：完整的前端打印解决专业的方案

// utils/printConfig.js
import { printHtml, printPdfByUrl, printHtmlByUrl } from 'web-print-pdf';
// 默认打印配置
export const defaultPrintOptions = {
silent: true,           // 静默打印
copies: 1,             // 打印份数
paper: 'A4',           // 纸张大小
orientation: 'portrait', // 打印方向
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
}
};
// 打印机配置
export const printerConfig = {
defaultPrinter: true,   // 使用默认打印机
// printer: 'HP-LaserJet-Pro', // 指定打印机
};

2. React打印Hook设计

自定义打印Hook

// hooks/usePrint.js
import { useState, useCallback } from 'react';
import { printHtml, printPdfByUrl, printHtmlByUrl } from 'web-print-pdf';
import { defaultPrintOptions, printerConfig } from '../utils/printConfig';
export const usePrint = () => {
const [isPrinting, setIsPrinting] = useState(false);
const [printError, setPrintError] = useState(null);
// 打印HTML内容
const printHtmlContent = useCallback(async (htmlContent, options = {}) => {
try {
setIsPrinting(true);
setPrintError(null);
const printOptions = {
...defaultPrintOptions,
...printerConfig,
...options
};
await printHtml({
content: htmlContent,
...printOptions
});
console.log('HTML内容打印成功');
} catch (error) {
console.error('HTML打印失败:', error);
setPrintError(error.message);
throw error;
} finally {
setIsPrinting(false);
}
}, []);
// 打印PDF文件
const printPdfFile = useCallback(async (pdfUrl, options = {}) => {
try {
setIsPrinting(true);
setPrintError(null);
const printOptions = {
...defaultPrintOptions,
...printerConfig,
...options
};
await printPdfByUrl({
url: pdfUrl,
...printOptions
});
console.log('PDF文件打印成功');
} catch (error) {
console.error('PDF打印失败:', error);
setPrintError(error.message);
throw error;
} finally {
setIsPrinting(false);
}
}, []);
// 打印网页URL
const printWebPage = useCallback(async (pageUrl, options = {}) => {
try {
setIsPrinting(true);
setPrintError(null);
const printOptions = {
...defaultPrintOptions,
...printerConfig,
...options
};
await printHtmlByUrl({
url: pageUrl,
...printOptions
});
console.log('网页打印成功');
} catch (error) {
console.error('网页打印失败:', error);
setPrintError(error.message);
throw error;
} finally {
setIsPrinting(false);
}
}, []);
return {
isPrinting,
printError,
printHtmlContent,
printPdfFile,
printWebPage
};
};

3. React打印组件实现

基础打印组件

// components/PrintButton.jsx
import React from 'react';
import { usePrint } from '../hooks/usePrint';
const PrintButton = ({
content,
type = 'html',
options = {},
children,
className = '',
disabled = false
}) => {
const { isPrinting, printError, printHtmlContent, printPdfFile, printWebPage } = usePrint();
const handlePrint = async () => {
try {
switch (type) {
case 'html':
await printHtmlContent(content, options);
break;
case 'pdf':
await printPdfFile(content, options);
break;
case 'url':
await printWebPage(content, options);
break;
default:
throw new Error('不支持的打印类型');
}
} catch (error) {
console.error('打印失败:', error);
}
};
return (
<div className="print-button-container"><buttononClick={handlePrint}disabled={disabled || isPrinting}className={`print-btn ${className} ${isPrinting ? 'printing' : ''}`}>{isPrinting ? '打印中...' : (children || '打印')}</button>{printError && (<div className="print-error">打印失败: {printError}</div>)}</div>);};export default PrintButton;

高级打印组件

// components/AdvancedPrintPanel.jsx
import React, { useState } from 'react';
import { usePrint } from '../hooks/usePrint';
const AdvancedPrintPanel = ({ content, type = 'html' }) => {
const { isPrinting, printError, printHtmlContent, printPdfFile, printWebPage } = usePrint();
const [printOptions, setPrintOptions] = useState({
copies: 1,
paper: 'A4',
orientation: 'portrait',
margin: { top: 10, right: 10, bottom: 10, left: 10 },
header: '', // 页眉设置
footer: '', // 页脚设置
printer: '', // 空字符串表示使用默认打印机
silent: true,
preview: false // 是否显示预览
});
const handlePrint = async () => {
try {
switch (type) {
case 'html':
await printHtmlContent(content, printOptions);
break;
case 'pdf':
await printPdfFile(content, printOptions);
break;
case 'url':
await printWebPage(content, printOptions);
break;
}
} catch (error) {
console.error('打印失败:', error);
}
};
return (
<div className="advanced-print-panel"><h3>打印设置</h3><div className="print-options"><div className="option-group"><label>打印份数:</label><inputtype="number"min="1"max="99"value={printOptions.copies}onChange={(e) => setPrintOptions({...printOptions,copies: parseInt(e.target.value) || 1})}/></div><div className="option-group"><label>纸张大小:</label><selectvalue={printOptions.paper}onChange={(e) => setPrintOptions({...printOptions,paper: e.target.value})}><option value="A4">A4</option><option value="A3">A3</option><option value="Letter">Letter</option><option value="Legal">Legal</option></select></div><div className="option-group"><label>打印方向:</label><selectvalue={printOptions.orientation}onChange={(e) => setPrintOptions({...printOptions,orientation: e.target.value})}><option value="portrait">纵向</option><option value="landscape">横向</option></select></div><div className="option-group"><label>页眉:</label><inputtype="text"placeholder="设置页眉内容"value={printOptions.header}onChange={(e) => setPrintOptions({...printOptions,header: e.target.value})}/></div><div className="option-group"><label>页脚:</label><inputtype="text"placeholder="设置页脚内容"value={printOptions.footer}onChange={(e) => setPrintOptions({...printOptions,footer: e.target.value})}/></div><div className="option-group"><label>页边距 (mm):</label><div className="margin-controls"><inputtype="number"placeholder="上"value={printOptions.margin.top}onChange={(e) => setPrintOptions({...printOptions,margin: { ...printOptions.margin, top: parseInt(e.target.value) || 0 }})}/><inputtype="number"placeholder="右"value={printOptions.margin.right}onChange={(e) => setPrintOptions({...printOptions,margin: { ...printOptions.margin, right: parseInt(e.target.value) || 0 }})}/><inputtype="number"placeholder="下"value={printOptions.margin.bottom}onChange={(e) => setPrintOptions({...printOptions,margin: { ...printOptions.margin, bottom: parseInt(e.target.value) || 0 }})}/><inputtype="number"placeholder="左"value={printOptions.margin.left}onChange={(e) => setPrintOptions({...printOptions,margin: { ...printOptions.margin, left: parseInt(e.target.value) || 0 }})}/></div></div><div className="option-group"><label>打印机:</label><inputtype="text"placeholder="留空使用默认打印机"value={printOptions.printer}onChange={(e) => setPrintOptions({...printOptions,printer: e.target.value})}/></div><div className="option-group"><label><inputtype="checkbox"checked={printOptions.preview}onChange={(e) => setPrintOptions({...printOptions,preview: e.target.checked})}/>打印预览</label></div></div><buttononClick={handlePrint}disabled={isPrinting}className="print-btn">{isPrinting ? '打印中...' : '开始打印'}</button>{printError && (<div className="error-message">错误: {printError}</div>)}</div>);};export default AdvancedPrintPanel;

4. 批量打印实现

批量打印Hook

// hooks/useBatchPrint.js
import { useState, useCallback } from 'react';
import { usePrint } from './usePrint';
export const useBatchPrint = () => {
const { printHtmlContent, printPdfFile, printWebPage } = usePrint();
const [batchStatus, setBatchStatus] = useState({
isProcessing: false,
completed: 0,
total: 0,
errors: []
});
const processBatch = useCallback(async (printTasks, options = {}) => {
setBatchStatus({
isProcessing: true,
completed: 0,
total: printTasks.length,
errors: []
});
const errors = [];
for (let i = 0; i < printTasks.length; i++) {
const task = printTasks[i];
try {
switch (task.type) {
case 'html':
await printHtmlContent(task.content, { ...options, ...task.options });
break;
case 'pdf':
await printPdfFile(task.content, { ...options, ...task.options });
break;
case 'url':
await printWebPage(task.content, { ...options, ...task.options });
break;
}
} catch (error) {
errors.push({
index: i,
task: task,
error: error.message
});
}
setBatchStatus(prev => ({
...prev,
completed: i + 1
}));
}
setBatchStatus(prev => ({
...prev,
isProcessing: false,
errors
}));
return {
success: errors.length === 0,
errors
};
}, [printHtmlContent, printPdfFile, printWebPage]);
return {
batchStatus,
processBatch
};
};

批量打印组件

// components/BatchPrintPanel.jsx
import React, { useState } from 'react';
import { useBatchPrint } from '../hooks/useBatchPrint';
const BatchPrintPanel = () => {
const { batchStatus, processBatch } = useBatchPrint();
const [printTasks, setPrintTasks] = useState([]);
const addTask = (task) => {
setPrintTasks(prev => [...prev, task]);
};
const removeTask = (index) => {
setPrintTasks(prev => prev.filter((_, i) => i !== index));
};
const handleBatchPrint = async () => {
await processBatch(printTasks);
};
return (
<div className="batch-print-panel"><h3>批量打印</h3><div className="task-list">{printTasks.map((task, index) => (<div key={index} className="task-item"><span>{task.name || `任务 ${index + 1}`}</span><button onClick={() => removeTask(index)}>删除</button></div>))}</div><div className="batch-controls"><button onClick={handleBatchPrint} disabled={batchStatus.isProcessing}>{batchStatus.isProcessing ? '处理中...' : '开始批量打印'}</button></div>{batchStatus.isProcessing && (<div className="progress-info">进度: {batchStatus.completed}/{batchStatus.total}</div>)}{batchStatus.errors.length > 0 && (<div className="error-list"><h4>打印错误:</h4>{batchStatus.errors.map((error, index) => (<div key={index} className="error-item">任务 {error.index + 1}: {error.error}</div>))}</div>)}</div>);};export default BatchPrintPanel;

5. 实际应用示例

复杂报表打印组件

// components/ComplexReportPrint.jsx
import React from 'react';
import PrintButton from './PrintButton';
const ComplexReportPrint = ({ reportData }) => {
const generateComplexReportHtml = (data) => {
return `
<div style="font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto;"><!-- 页眉 --><div style="text-align: center; margin-bottom: 20px; border-bottom: 2px solid #333;"><h1 style="color: #333; margin: 0;">${data.title}</h1><p style="margin: 5px 0; color: #666;">${data.subtitle}</p></div><!-- 交叉报表 --><div style="margin: 20px 0;"><h3>销售交叉报表</h3><table style="width: 100%; border-collapse: collapse; border: 2px solid #333;"><thead><tr style="background-color: #f0f0f0;"><th style="border: 1px solid #333; padding: 10px; text-align: center;">产品类别</th><th style="border: 1px solid #333; padding: 10px; text-align: center;">Q1销售额</th><th style="border: 1px solid #333; padding: 10px; text-align: center;">Q2销售额</th><th style="border: 1px solid #333; padding: 10px; text-align: center;">Q3销售额</th><th style="border: 1px solid #333; padding: 10px; text-align: center;">Q4销售额</th><th style="border: 1px solid #333; padding: 10px; text-align: center;">总计</th></tr></thead><tbody>${data.crossTable.map(row => `<tr><td style="border: 1px solid #333; padding: 8px; font-weight: bold;">${row.category}</td><td style="border: 1px solid #333; padding: 8px; text-align: right;">¥${row.q1}</td><td style="border: 1px solid #333; padding: 8px; text-align: right;">¥${row.q2}</td><td style="border: 1px solid #333; padding: 8px; text-align: right;">¥${row.q3}</td><td style="border: 1px solid #333; padding: 8px; text-align: right;">¥${row.q4}</td><td style="border: 1px solid #333; padding: 8px; text-align: right; font-weight: bold;">¥${row.total}</td></tr>`).join('')}</tbody></table></div><!-- 嵌套表格 --><div style="margin: 20px 0;"><h3>详细产品信息</h3>${data.nestedTables.map(table => `<div style="margin: 15px 0; border: 1px solid #ddd; padding: 10px;"><h4 style="margin: 0 0 10px 0; color: #333;">${table.category}</h4><table style="width: 100%; border-collapse: collapse;"><thead><tr style="background-color: #f8f8f8;"><th style="border: 1px solid #ddd; padding: 8px;">产品名称</th><th style="border: 1px solid #ddd; padding: 8px;">规格</th><th style="border: 1px solid #ddd; padding: 8px;">库存</th><th style="border: 1px solid #ddd; padding: 8px;">价格</th></tr></thead><tbody>${table.products.map(product => `<tr><td style="border: 1px solid #ddd; padding: 8px;">${product.name}</td><td style="border: 1px solid #ddd; padding: 8px;">${product.spec}</td><td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${product.stock}</td><td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥${product.price}</td></tr>`).join('')}</tbody></table></div>`).join('')}</div><!-- 二维码和图片 --><div style="margin: 20px 0; display: flex; justify-content: space-between; align-items: center;"><div style="text-align: center;"><h4>二维码</h4><div style="width: 100px; height: 100px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;"><span style="font-size: 12px; color: #666;">二维码图片</span></div><p style="margin: 5px 0; font-size: 12px;">${data.qrCode}</p></div><div style="text-align: center;"><h4>产品图片</h4><div style="width: 100px; height: 100px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;"><span style="font-size: 12px; color: #666;">产品图片</span></div><p style="margin: 5px 0; font-size: 12px;">产品展示图</p></div></div><!-- 页脚 --><div style="margin-top: 30px; text-align: center; border-top: 1px solid #ddd; padding-top: 10px;"><p style="margin: 5px 0; color: #666;">生成时间: ${new Date().toLocaleString()}</p><p style="margin: 5px 0; color: #666;">报表编号: ${data.reportId}</p></div></div>`;};return (<div className="complex-report-print"><PrintButtoncontent={generateComplexReportHtml(reportData)}type="html"options={{copies: 1,paper: 'A4',orientation: 'landscape',margin: { top: 15, right: 15, bottom: 15, left: 15 },header: '复杂报表 - 销售数据分析',footer: '第 {page} 页，共 {pages} 页',silent: true,preview: true}}className="report-print-btn">打印复杂报表</PrintButton></div>);};export default ComplexReportPrint;

性能优化和最佳实践

1. 打印性能优化

// utils/printOptimizer.js
export class PrintOptimizer {
constructor() {
this.printQueue = [];
this.isProcessing = false;
this.maxConcurrent = 3; // 最大并发数
}
// 队列管理
addToQueue(printTask) {
this.printQueue.push(printTask);
this.processQueue();
}
async processQueue() {
if (this.isProcessing || this.printQueue.length === 0) {
return;
}
this.isProcessing = true;
const concurrentTasks = [];
// 控制并发数量
for (let i = 0; i < Math.min(this.maxConcurrent, this.printQueue.length); i++) {
const task = this.printQueue.shift();
concurrentTasks.push(this.executeTask(task));
}
await Promise.allSettled(concurrentTasks);
this.isProcessing = false;
// 继续处理剩余任务
if (this.printQueue.length > 0) {
setTimeout(() => this.processQueue(), 100);
}
}
async executeTask(task) {
try {
await task.execute();
console.log('打印任务完成:', task.id);
} catch (error) {
console.error('打印任务失败:', task.id, error);
}
}
}

2. 错误处理和重试机制

// utils/printRetry.js
export const withRetry = async (printFunction, maxRetries = 3, delay = 1000) => {
let lastError;
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
return await printFunction();
} catch (error) {
lastError = error;
console.warn(`打印尝试 ${attempt} 失败:`, error.message);
if (attempt < maxRetries) {
console.log(`等待 ${delay}ms 后重试...`);
await new Promise(resolve => setTimeout(resolve, delay));
delay *= 2; // 指数退避
}
}
}
throw new Error(`打印失败，已重试 ${maxRetries} 次: ${lastError.message}`);
};
// 使用示例
const printWithRetry = async (content, options) => {
return withRetry(async () => {
return await printHtml({ content, ...options });
});
};

3. 打印状态监控

// hooks/usePrintStatus.js
import { useState, useEffect } from 'react';
export const usePrintStatus = () => {
const [status, setStatus] = useState({
isConnected: false,
printerCount: 0,
lastPrintTime: null,
errorCount: 0
});
useEffect(() => {
// 检查打印服务连接状态
const checkConnection = async () => {
try {
// 这里可以调用web-print-pdf的状态检查API
setStatus(prev => ({ ...prev, isConnected: true }));
} catch (error) {
setStatus(prev => ({ ...prev, isConnected: false }));
}
};
checkConnection();
const interval = setInterval(checkConnection, 5000);
return () => clearInterval(interval);
}, []);
return status;
};