vue实现打印预览
实现 Vue 打印预览的方法
使用 window.print() 方法
在 Vue 中可以通过调用浏览器的 window.print() 方法实现简单的打印功能。这种方法适用于打印当前页面或指定的 DOM 元素。
methods: {
printPage() {
window.print();
}
}使用 vue-print-nb 插件
vue-print-nb 是一个专门为 Vue 设计的打印插件，可以更方便地控制打印内容和样式。
安装插件：
npm install vue-print-nb --save在 main.js 中引入：
import Print from 'vue-print-nb'
Vue.use(Print)在组件中使用：
<template>
<div id="printContent">
<!-- 需要打印的内容 -->
</div>
<button v-print="'#printContent'">打印</button>
</template>使用 iframe 实现打印
这种方法可以在不干扰当前页面的情况下实现打印预览。
printWithIframe() {
const content = document.getElementById('printContent').innerHTML;
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const frameDoc = iframe.contentWindow || iframe.contentDocument;
if (frameDoc.document) {
frameDoc = frameDoc.document;
}
frameDoc.open();
frameDoc.write(`
<html>
<head>
<title>打印预览</title>
<style>
/* 自定义打印样式 */
@media print {
body { margin: 0; padding: 0; }
}
</style>
</head>
<body>${content}</body>
</html>
`);
frameDoc.close();
setTimeout(() => {
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}, 200);
}自定义打印样式
通过 CSS 可以控制打印时的页面样式，隐藏不需要打印的元素。
@media print {
.no-print {
display: none;
}
.print-only {
display: block;
}
body {
margin: 0;
padding: 0;
}
}使用 html2canvas 和 jsPDF 生成 PDF 预览
这种方法适合需要将页面内容转换为 PDF 再进行打印的场景。
安装依赖：
npm install html2canvas jspdf --save实现代码：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
methods: {
async printPDF() {
const element = document.getElementById('printContent');
const canvas = await html2canvas(element);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('print.pdf');
// 或者直接打印
// pdf.autoPrint();
// window.open(pdf.output('bloburl'));
}
}注意事项
- 打印样式需要使用
@media print专门设置 - 打印时可能需要调整页面边距和字体大小
- 复杂的布局在打印时可能需要特殊处理
- 某些浏览器可能会阻止弹出式打印窗口，需要用户允许
以上方法可以根据具体需求选择使用，简单打印需求推荐使用 window.print() 或 vue-print-nb 插件，复杂需求可以考虑使用 iframe 或 PDF 生成方案。
