🧑 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
vue3项目实战 打印、导出PDF
一 维护模板
1 打印模板：
<template>
<div class="print-content">
<div v-for="item in data.detailList" :key="item.id" class="label-item">
<!-- 顶部价格区域 - 最醒目 -->
<div class="price-header">
<div class="main-price">
<span class="price-value">{{ formatPrice(item.detailPrice) }}</span>
<span class="currency">¥</span>
</div>
<div v-if="item.originalPrice && item.originalPrice !== item.detailPrice" class="origin-price">
原价 ¥{{ formatPrice(item.originalPrice) }}
</div>
</div>
<!-- 商品信息区域 -->
<div class="product-info">
<div class="product-name">{{ truncateText(item.skuName, 20) }}</div>
<div class="product-code">{{ item.skuCode || item.skuName.slice(-8) }}</div>
</div>
<!-- 条码区域 -->
<div class="barcode-section" v-if="item.showBarcode !== false">
<img :src="item.skuCodeImg || '123456789'" alt="条码" class="barcode" v-if="item.skuCode">
</div>
<!-- 底部信息区域 -->
<div class="footer-info">
<div class="info-row">
<span class="location">{{ item.location || "A1-02" }}</span>
<span class="stock">库存{{ item.stock || 36 }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
required: true
}
},
methods: {
formatPrice(price) {
return parseFloat(price || 0).toFixed(2);
},
truncateText(text, maxLength) {
if (!text) return '';
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
}
}
}
</script>
<style scoped lang="scss">
/* 主容器 - 网格布局 */
.print-content {
display: grid; /* 启用 CSS Grid 布局 */
grid-template-columns: repeat(auto-fill, 50mm); /* 每列宽 50mm，自动填充剩余空间 */
grid-auto-rows: 30mm; /* 每行固定高度 30mm */
background: #f5f5f5; /* 网格背景色（浅灰色） */
/* 单个标签样式 */
.label-item {
width: 50mm;
height: 30mm;
background: #ffffff;
border-radius: 2mm;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
page-break-inside: avoid;
font-family: 'OCR','ShareTechMono', 'Condensed','Liberation Mono','Microsoft YaHei', 'SimSun', 'Arial', monospace;
box-shadow: none; /* 避免阴影被打印 */
/* 价格头部区域 - 最醒目 */
.price-header {
background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
color: white;
padding: 1mm 2mm;
text-align: center;
position: relative;
.main-price {
display: flex;
align-items: baseline;
justify-content: center;
line-height: 1;
.currency {
color: #000 !important;
font-weight: bold;
margin-left: 2mm;
}
.price-value {
font-size: 16px;
font-weight: 900;
letter-spacing: -0.5px;
color: #000 !important;
}
}
.origin-price {
font-size: 6px;
opacity: 0.8;
text-decoration: line-through;
margin-top: 0.5mm;
}
/* 特殊效果 - 价格角标 */
&::after {
content: '';
position: absolute;
bottom: -1mm;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 2mm solid transparent;
border-right: 2mm solid transparent;
border-top: 1mm solid #1976D2;
}
}
/* 商品信息区域 */
.product-info {
padding: 1.5mm 2mm 1mm 2mm;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.product-name {
font-size: 10px;
font-weight: 600;
color: #000 !important;
line-height: 1.2;
text-align: center;
margin-bottom: 0.5mm;
overflow: hidden;
display: -webkit-box;
--webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.product-code {
font-size: 8px;
color: #000 !important;
text-align: center;
font-family: 'Courier New', monospace;
letter-spacing: 0.3px;
}
}
/* 条码区域 */
.barcode-section {
padding: 0 1mm;
text-align: center;
height: 6mm;
display: flex;
align-items: center;
justify-content: center;
.barcode {
height: 5mm;
max-width: 46mm;
object-fit: contain;
}
}
/* 底部信息区域 */
.footer-info {
background: #f8f9fa;
padding: 0.8mm 2mm;
border-top: 0.5px solid #e0e0e0;
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
.location, .stock {
font-size: 5px;
color: #666;
font-weight: 500;
}
.location {
background: #e3f2fd;
color: #1976d2;
padding: 0.5mm 1mm;
border-radius: 1mm;
font-weight: 600;
}
.stock {
background: #f3e5f5;
color: #7b1fa2;
padding: 0.5mm 1mm;
border-radius: 1mm;
font-weight: 600;
}
}
}
}
}
/* 打印优化 */
@media print {
.price-header {
/* 打印时使用模板颜色 */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
</style>
2 注意说明：
1 注意：使用原生的标签 + vue3响应式 ，不可以使用element-plus;
2 @media print{} 用来维护打印样式，最好在打印封装中统一维护，否则交叉样式会被覆盖；
二 封装获取模板
1 模板设计
// 1 模板类型：
-- invoice-A4发票 ticket-80mm热敏小票 label-货架标签
// 2 模板写死在前端，通过更新前端维护
-- src/compoments/print/template/invoice/...
-- src/compoments/print/template/ticket/...
-- src/compoments/print/template/label/...
// 3 通过 模板类型 templateType 、模板路径 templatePath -> 获取唯一模板
-- 前端实现模板获取
2 封装模板获取
// src/utils/print/templateLoader.js
import { TEMPLATE_MAP } from '@/components/Print/templates';
const templateCache = new Map();
const MAX_CACHE_SIZE = 10; // 防止内存无限增长
export async function loadTemplate(type, path, isFallback = false) {
console.log('loadTemplate 进行模板加载：', type, path, isFallback);
const cacheKey = `${type}/${path}`;
// 检查缓存
if (templateCache.has(cacheKey)) {
return templateCache.get(cacheKey);
}
try {
// 检查类型和路径是否有效
if (!TEMPLATE_MAP[type] || !TEMPLATE_MAP[type][path]) {
throw new Error(`模板 ${type}/${path} 未注册`);
}
// 动态加载模块
const module = await TEMPLATE_MAP[type][path]();
// 清理最久未使用的缓存
if (templateCache.size >= MAX_CACHE_SIZE) {
// Map 的 keys() 是按插入顺序的迭代器
const oldestKey = templateCache.keys().next().value;
templateCache.delete(oldestKey);
}
templateCache.set(cacheKey, module.default);
return module.default;
} catch (e) {
console.error(`加载模板失败: ${type}/${path}`, e);
// 回退到默认模板
if (isFallback || path === 'Default') {
throw new Error(`无法加载模板 ${type}/${path} 且默认模板也不可用`);
}
return loadTemplate(type, 'Default', true);
}
}
三 生成打印数据
1 根据模板 + 打印数据 -> 生成 html(支持二维码、条形码)
import JsBarcode from 'jsbarcode';
import { createApp, h } from 'vue';
import { isExternal } from "@/utils/validate";
import QRCode from 'qrcode';
// 1 生成条码图片
function generateBarcodeBase64(code) {
if (!code) return '';
const canvas = document.createElement('canvas');
try {
JsBarcode(canvas, code, {
format: 'CODE128', // 条码格式 CODE128、EAN13、EAN8、UPC、CODE39、ITF、MSI...
displayValue: false, // 是否显示条码值
width: 2, // 条码宽度
height: 40, // 条码高度
margin: 0, // 条码外边距
});
return canvas.toDataURL('image/png');
} catch (err) {
console.warn('条码生成失败:', err);
return '';
}
}
// 2 拼接图片路径
function getImageUrl(imgSrc) {
if (!imgSrc) {
return ''
}
try {
const src = imgSrc.split(",")[0].trim();
// 2.1 判断图片路径是否为完整路径
return isExternal(src) ? src : `${import.meta.env.VITE_APP_BASE_API}${src}`;
} catch (err) {
console.warn('图片路径拼接失败:', err);
return '';
}
}
// 更安全的QR码生成
async function generateQRCode(url) {
if (!url) return '';
try {
return await QRCode.toDataURL(url.toString())
} catch (err) {
console.warn('QR码生成失败:', err);
return '';
}
}
/**
* 3 打印模板渲染数据
* @param {*} Component 模板组件
* @param {*} printData 打印数据
* @returns html
*/
export default async function renderTemplate(Component, printData) {
// 1. 数据验证和初始化
if (!printData || typeof printData !== 'object') {
throw new Error('Invalid data format');
}
// 2. 创建安全的数据副本
const data = {
...printData,
tenant: {
...printData.tenant,
logo: printData?.tenant?.logo || '',
logoImage: ''
},
invoice: {
...printData.invoice,
invoiceQr: printData?.invoice?.invoiceQr || '',
invoiceQrImage: ''
},
detailList: Array.isArray(printData.detailList) ? printData.detailList : [],
invoiceDetailList: Array.isArray(printData.invoiceDetailList) ? printData.invoiceDetailList : [],
};
// 3. 异步处理二维码和条码和logo
try {
// 3.1 处理二维码
if (data.invoice.invoiceQr) {
data.invoice.invoiceQrImage = await generateQRCode(data.invoice.invoiceQr);
}
// 3.2 处理条码
if (data.detailList.length > 0) {
data.detailList = data.detailList.map(item => ({
...item,
skuCodeImg: item.skuCode ? generateBarcodeBase64(item.skuCode) : ''
}));
}
// 3.3 处理LOGO
if (data.tenant.logo) {
data.tenant.logoImage = getImageUrl(data.tenant?.logo);
}
} catch (err) {
console.error('数据处理失败:', err);
// 即使部分数据处理失败也继续执行
}
// 4. 创建渲染容器
const div = document.createElement('div');
div.id = 'print-template-container';
// 5. 使用Promise确保渲染完成
return new Promise((resolve) => {
const app = createApp({
render: () => h(Component, { data })
});
// 6. 特殊处理：等待两个tick确保渲染完成
app.mount(div);
nextTick().then(() => {
return nextTick(); // 双重确认
}).then(() => {
const html = div.innerHTML;
app.unmount();
div.remove();
resolve(html);
}).catch(err => {
console.error('渲染失败:', err);
app.unmount();
div.remove();
resolve('<div>渲染失败</div>');
});
});
}
四 封装打印
// src/utils/print/printHtml.js
import { PrintTemplateType } from "@/views/print/printTemplate/printConstants";
/**
* 精准打印指定HTML（无浏览器默认页眉页脚）
* @param {string} html - 要打印的HTML内容
*/
export function printHtml(html, { templateType = PrintTemplateType.Invoice, templateWidth = 210, templateHeight = 297 }) {
// 1 根据类型调整默认参数
if (templateType === PrintTemplateType.Ticket) {
templateWidth = 80; // 热敏小票通常80mm宽
templateHeight = 0; // 高度自动
} else if (templateType === PrintTemplateType.Label) {
templateWidth = templateWidth || 50; // 标签打印机常见宽度50mm
templateHeight = templateHeight || 30; // 标签常见高度30mm
}
// 1. 创建打印专用容器
const printContainer = document.createElement('div');
printContainer.id = 'print-container';
document.body.appendChild(printContainer);
// 2. 注入打印控制样式（隐藏页眉页脚）
const style = document.createElement('style');
style.innerHTML = `
/* 打印页面设置 */
@page {
margin: 0; /* 去除页边距 */
size: ${templateWidth}mm ${templateHeight === 0 ? 'auto' : `${templateHeight}mm`}; /* 自定义纸张尺寸 */
}
@media print {
body, html {
width: ${templateWidth}mm !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important; /* 强制白色背景 */
}
/* 隐藏页面所有元素 */
body * {
visibility: hidden;
}
/* 只显示打印容器内容 */
#print-container, #print-container * {
visibility: visible;
}
/* 打印容器定位 */
#print-container {
position: absolute;
left: 0;
top: 0;
width: ${templateWidth}mm !important;
${templateHeight === 0 ? 'auto' : `height: ${templateHeight}mm !important;`}
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
page-break-after: avoid; /* 避免分页 */
page-break-inside: avoid;
}
}
/* 屏幕预览样式 */
#print-container {
width: ${templateWidth}mm;
${templateHeight === 0 ? 'auto' : `height: ${templateHeight}mm;`}
// margin: 10px auto;
// padding: 5mm;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
background: white;
}
`;
document.head.appendChild(style);
// 3. 放入要打印的内容
printContainer.innerHTML = html;
// 4. 触发打印
window.print();
// 5. 清理（延迟确保打印完成）
setTimeout(() => {
document.body.removeChild(printContainer);
document.head.removeChild(style);
}, 1000);
}
五 封装导出PDF
// /src/utils/print/pdfExport.js
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
import { PrintTemplateType } from "@/views/print/printTemplate/printConstants";
// 毫米转像素的转换系数 (96dpi下)
const MM_TO_PX = 3.779527559;
// 默认A4尺寸 (单位: mm)
const DEFAULT_WIDTH = 210;
const DEFAULT_HEIGHT = 297;
export async function exportToPDF(html, {
filename,
templateType = PrintTemplateType.Invoice,
templateWidth = DEFAULT_WIDTH,
templateHeight = DEFAULT_HEIGHT,
allowPaging = true
}) {
// 生成文件名
const finalFilename = filename || `${templateType}_${Date.now()}.pdf`;
// 处理宽度和高度，如果为0则使用默认值
const widthMm = templateWidth === 0 ? DEFAULT_WIDTH : templateWidth;
// 分页模式使用A4高度，单页模式自动高度
const heightMm = templateHeight === 0 ? (allowPaging ? DEFAULT_HEIGHT : 'auto') : templateHeight;
// 创建临时容器
const container = document.createElement('div');
container.style.position = 'absolute'; // 使容器脱离正常文档流
container.style.left = '-9999px'; // 移出可视区域，避免在页面上显示
container.style.width = `${widthMm}mm`; // 容器宽度
container.style.height = 'auto'; // 让内容决定高度
container.style.overflow = 'visible'; // 溢出部分不被裁剪
container.innerHTML = html; // 添加HTML内容
document.body.appendChild(container); // 将准备好的临时容器添加到文档中
try {
if (allowPaging) {
console.log('导出PDF - 分页处理模式');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: [widthMm, heightMm]
});
// 获取所有页面或使用容器作为单页
const pageElements = container.querySelectorAll('.page');
const pages = pageElements.length > 0 ? pageElements : [container];
for (let i = 0; i < pages.length; i++) {
const page = pages[i];
page.style.backgroundColor = 'white';
// 计算页面高度(像素)
const pageHeightPx = page.scrollHeight;
const pageHeightMm = pageHeightPx / MM_TO_PX;
const canvas = await html2canvas(page, {
scale: 2,
useCORS: true, // 启用跨域访问
backgroundColor: '#FFFFFF',
logging: true,
width: widthMm * MM_TO_PX, // 画布 宽度转换成像素
height: pageHeightPx, // 画布 高度转换成像素
windowWidth: widthMm * MM_TO_PX, // 模拟视口 宽度转换成像素
windowHeight: pageHeightPx // 模拟视口 高度转换成像素
});
const imgData = canvas.toDataURL('image/png');
const imgWidth = widthMm;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
if (i > 0) {
pdf.addPage([widthMm, heightMm], 'portrait');
}
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
}
pdf.save(finalFilename);
} else {
console.log('导出PDF - 单页处理模式');
const canvas = await html2canvas(container, {
scale: 2,
useCORS: true,
backgroundColor: '#FFFFFF',
logging: true,
width: widthMm * MM_TO_PX,
height: container.scrollHeight,
windowWidth: widthMm * MM_TO_PX,
windowHeight: container.scrollHeight
});
const imgData = canvas.toDataURL('image/png');
const imgWidth = widthMm;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
const pdf = new jsPDF({
orientation: imgWidth > imgHeight ? 'landscape' : 'portrait',
unit: 'mm',
format: [imgWidth, imgHeight]
});
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save(finalFilename);
}
} catch (error) {
console.error('PDF导出失败:', error);
throw error;
} finally {
document.body.removeChild(container);
}
}
六 测试打印
1 封装打印预览界面
方便调试模板，此处就不提供预览界面的代码里，自己手搓吧！
2 使用浏览器默认打印
1 查看打印预览，正常打印预览与预期一样； 2 擦和看打印结果；
3 注意事项
1 涉及的模板尺寸 与 打印纸张的尺寸 要匹配；
-- 否则预览界面异常、打印结果异常；
2 处理自动分页，页眉页脚留够空间，否则会覆盖；
3 有些打印机调试需要设置打印机的首选项，主要设置尺寸！
七 问题解决
// 1 打印预览样式与模板不一致
-- 检查 @media print{} 这里的样式，
-- 分别检查模板 和 打印封装；
// 2 打印预览异常、打印正常
-- 问题原因：打印机纸张尺寸识别异常，即打印机当前设置的尺寸与模板尺寸不一致；
-- 解决办法：设置打印机 -> 首选项 -> 添加尺寸设置；
// 3 打印机实测：
-- 目前A4打印机、80热敏打印机、标签打印机 都有测试，没有问题！
-- 如果字体很丑，建议选择等宽字体；
-- 调节字体尺寸、颜色、尽可能美观、节省纸张！
// 4 进一步封装
-- 项目中可以进一步封装打印，向所有流程封装到一个service中，打印只需要传递 printData、templateType；
-- 可以封装批量打印；
-- 模板可以根据用户自定义配置，通过pinia维护状态；
// 5 后端来实现打印数据生成
-- 我是前端能做的尽可能不放到后端处理，减少后端请求处理压力！
本文转载于：https://juejin.cn/post/7521356618174021674
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
京ICP备14020293号-4