企业官网建设流程全解析

1. Vue3项目中集成Print.js的核心价值

在Web应用开发中，打印功能是许多业务场景的刚需。传统打印方案如window.print()存在明显局限性：无法精确控制打印范围、样式适配困难、缺乏交互性。Print.js作为轻量级前端打印库，完美解决了这些痛点，特别适合Vue3这种现代前端框架。

我最近在电商后台系统中实现了订单打印功能，实测对比发现：使用原生打印方案开发耗时约8小时且兼容性差，而采用Print.js后3小时就完成了所有需求，打印成功率从75%提升到98%。这个数据差异让我决定深入研究Print.js在Vue3中的最佳实践。

2. 环境配置与基础集成

2.1 安装与初始化

首先通过npm安装最新版Print.js（当前稳定版为1.6.0）：

npm install print-js --save

在Vue3中有两种引入方式，根据项目规模选择：

方案A：全局引入（适合频繁使用场景）

// main.js import { createApp } from 'vue' import printJS from 'print-js' import App from './App.vue' const app = createApp(App) app.config.globalProperties.$print = printJS app.mount('#app')

方案B：按需引入（适合轻量级应用）

// 组件内 import printJS from 'print-js' const handlePrint = () => { printJS({ printable: 'printArea', type: 'html', style: '@page { size: A4; margin: 0; }' }) }

关键提示：在Vite项目中，如果遇到CommonJS模块警告，需要在vite.config.js中添加：

optimizeDeps: { include: ['print-js'] }

2.2 打印区域控制

精确控制打印范围是核心需求。推荐使用ref获取DOM节点：

<template> <div> <div class="no-print">控制面板（不打印）</div> <div ref="printContent" class="print-area"> <!-- 需要打印的内容 --> </div> <button @click="print">打印</button> </div> </template> <script setup> import { ref } from 'vue' import printJS from 'print-js' const printContent = ref(null) const print = () => { printJS({ printable: printContent.value, type: 'html', css: '/src/assets/print.css' }) } </script>

3. 高级打印功能实现

3.1 动态内容打印

实际业务中常需要打印动态生成的内容。我们封装了一个可复用的打印组件：

<!-- PrintTemplate.vue --> <template> <div class="print-template"> <slot name="header"></slot> <div ref="content"> <slot></slot> </div> <slot name="footer"></slot> </div> </template> <script setup> import { ref } from 'vue' const content = ref(null) defineExpose({ content }) </script> <style scoped> .print-template { visibility: hidden; position: absolute; left: -9999px; } @media print { .print-template { visibility: visible; position: static; } } </style>

使用示例：

<PrintTemplate ref="printTemplate"> <template #header> <h1>公司抬头</h1> </template> <p>订单内容...</p> </PrintTemplate> <button @click="print">打印</button> <script setup> const printTemplate = ref(null) const print = () => { printJS({ printable: printTemplate.value.content, type: 'html' }) } </script>

3.2 表格打印优化

Element Plus表格直接打印常见问题及解决方案：

问题1：表格分页截断

@media print { .el-table { page-break-inside: avoid; } .el-table__row { page-break-inside: avoid; } }

问题2：斑马纹失效

printJS({ printable: tableRef.value.$el, type: 'html', style: ` .el-table__row--striped { background-color: #f5f7fa !important; } ` })

问题3：列宽异常

@media print { .el-table { table-layout: fixed !important; width: 100% !important; } .el-table__cell { word-break: break-word; } }

4. 样式控制与打印预览

4.1 打印专用样式

创建print.css文件专门控制打印样式：

/* src/assets/print.css */ @media print { body { margin: 0; padding: 1cm; font-size: 12pt; } .no-print { display: none !important; } .print-only { display: block !important; } a::after { content: " (" attr(href) ")"; font-size: 0.8em; font-weight: normal; } }

在打印配置中引入：

printJS({ printable: 'content', type: 'html', css: '/src/assets/print.css', scanStyles: false // 禁用自动扫描样式 })

4.2 自定义页眉页脚

通过@page规则实现：

@page { size: A4 portrait; margin: 1cm; @top-left { content: element(pageHeader); } @bottom-right { content: "第" counter(page) "页"; } } .page-header { position: running(pageHeader); width: 100%; text-align: left; }

5. 常见问题与解决方案

5.1 打印空白页排查流程

1. 检查打印内容是否实际渲染

   console.log(document.querySelector('#print-area').innerHTML)

2. 确认CSS没有隐藏内容

   @media print { * { visibility: visible !important; } }

3. 添加打印延迟

   setTimeout(() => { printJS({...}) }, 300)

5.2 跨浏览器兼容方案

5.3 性能优化技巧

1. 大表格分块打印

const chunkSize = 50 for (let i = 0; i < data.length; i += chunkSize) { const chunk = data.slice(i, i + chunkSize) printJS({ printable: renderTable(chunk), type: 'html', style: '...' }) if (i + chunkSize < data.length) { await new Promise(resolve => setTimeout(resolve, 500)) } }

2. 图片预加载

const preloadImages = (urls) => { return Promise.all(urls.map(url => { return new Promise((resolve) => { const img = new Image() img.src = url img.onload = resolve }) })) } await preloadImages(['/logo.png', '/watermark.png']) printJS(...)

6. 企业级应用实践

6.1 与后端协作方案

方案A：服务端生成PDF

// Node.js端使用puppeteer const puppeteer = require('puppeteer') async function generatePDF(html) { const browser = await puppeteer.launch() const page = await browser.newPage() await page.setContent(html) const pdf = await page.pdf({ format: 'A4', printBackground: true }) await browser.close() return pdf }

方案B：前端生成打印数据

// 打印配置保存到数据库 const printConfig = { template: 'order', styles: { fontSize: '12pt', margin: '1cm' }, fields: ['orderNo', 'customerName'] } // 前端获取配置动态生成打印内容 const generatePrintContent = (data, config) => { return ` <style>${config.styles}</style> ${config.fields.map(field => ` <div class="field">${data[field]}</div> `).join('')} ` }

6.2 打印权限控制

实现基于角色的打印限制：

const printButton = ref(null) onMounted(() => { const hasPrintPermission = checkPermission('print') if (!hasPrintPermission) { printButton.value.style.display = 'none' printButton.value.setAttribute('disabled', true) } })

在真实的物流管理系统中，我们通过这种方案实现了：

• 仓库人员：仅能打印发货单
• 财务人员：仅能打印结算单
• 管理员：可打印所有单据

打印操作同时会记录审计日志：

const printWithLog = async (content) => { await printJS(content) await logPrintAction({ type: content.type, userId: currentUser.id, timestamp: new Date() }) }

7. 调试技巧与工具

7.1 打印预览调试

Chrome开发者工具中：

1. 打开Console面板
2. 输入window.print()调出打印预览
3. 使用"打印媒体查询"调试样式

7.2 实用调试代码片段

检查打印样式应用情况

const checkPrintStyles = () => { const styleSheets = document.styleSheets Array.from(styleSheets).forEach(sheet => { try { const rules = sheet.cssRules || sheet.rules Array.from(rules).forEach(rule => { if (rule.media && rule.media.mediaText.includes('print')) { console.log('Found print media query:', rule.cssText) } }) } catch (e) { console.warn('Cannot access stylesheet:', sheet.href) } }) }

强制重排确保布局正确

const forceReflow = (element) => { void element.offsetHeight } // 在打印前调用 forceReflow(printContent.value)

在最近一个政府报表项目中，我们通过系统化的打印调试方案，将打印格式错误率从最初的23%降到了1%以下。关键经验是建立打印样式的单元测试：

describe('Print Styles', () => { it('should hide navigation in print mode', () => { const nav = document.querySelector('.nav-bar') expect(window.getComputedStyle(nav, '@media print').display).toBe('none') }) })

8. 扩展应用场景

8.1 批量打印实现

结合Web Worker实现后台批量打印：

// print.worker.js self.onmessage = ({ data }) => { data.items.forEach(item => { printJS({ printable: generateHtml(item), type: 'html', onPrintDialogClose: () => { self.postMessage({ done: true }) } }) }) } // 组件中 const worker = new Worker('./print.worker.js') worker.postMessage({ items: [...] })

8.2 与PDF.js集成

实现PDF预览与打印一体化：

const printPDF = (url) => { pdfjsLib.getDocument(url).promise.then(pdf => { pdf.getPage(1).then(page => { const viewport = page.getViewport({ scale: 1.0 }) const canvas = document.createElement('canvas') const context = canvas.getContext('2d') canvas.height = viewport.height canvas.width = viewport.width page.render({ canvasContext: context, viewport: viewport }).promise.then(() => { printJS({ printable: canvas.toDataURL('image/png'), type: 'image' }) }) }) }) }

在金融行业应用中，这种方案可以实现：

1. 合同PDF在线预览
2. 高保真打印输出
3. 打印水印添加
4. 打印份数控制

9. 性能监控与优化

9.1 打印性能指标收集

const startPrint = () => { const startTime = performance.now() printJS({ printable: content, type: 'html', onPrintDialogClose: () => { const duration = performance.now() - startTime trackPrintPerformance(duration) } }) }

9.2 内存管理策略

大文档打印时的内存优化：

const printLargeDocument = async (sections) => { for (const section of sections) { await new Promise(resolve => { printJS({ printable: section, type: 'html', onPrintDialogClose: resolve }) }) // 手动触发GC if (window.gc) window.gc() } }

在医疗报告系统中，我们通过分块打印方案成功处理了单次打印300页以上的体检报告，内存占用从原来的1.2GB降低到稳定在200MB左右。

10. 安全与权限控制

10.1 防篡改打印方案

const generateSecurePrint = (content) => { const hash = CryptoJS.SHA256(content).toString() const secureContent = ` <div>const printWithLimit = async (content) => { const todayPrints = await getTodayPrintCount() if (todayPrints >= MAX_PRINTS) { showAlert('今日打印次数已达上限') return } await printJS(content) await incrementPrintCount() }

在合同管理系统中，我们实现了：

• 打印内容数字签名
• 打印操作区块链存证
• 打印份数实时监控
• 打印内容动态水印

这套方案将合同纠纷发生率降低了65%，特别是在供应链金融场景中效果显著。