vue实现打印的方法
使用 window.print() 方法
在 Vue 中可以直接调用原生 window.print() 方法触发浏览器打印功能。这种方式简单但无法定制打印内容样式。
<template>
<button @click="handlePrint">打印页面</button>
</template>
<script>
export default {
methods: {
handlePrint() {
window.print();
}
}
}
</script>使用 vue-print-nb 插件
安装 vue-print-nb 插件可以更方便地实现打印功能，支持指定打印区域和自定义样式。
安装插件：
npm install vue-print-nb --save在 Vue 项目中使用：
import Print from 'vue-print-nb'
Vue.use(Print);模板中使用：
<template>
<div id="printArea">
<!-- 需要打印的内容 -->
<h1>打印内容标题</h1>
<p>打印内容正文</p>
</div>
<button v-print="printObj">打印</button>
</template>
<script>
export default {
data() {
return {
printObj: {
id: 'printArea',
popTitle: '打印标题', // 打印标题
extraCss: 'https://example.com/print.css' // 自定义打印样式
}
}
}
}
</script>使用 CSS 媒体查询控制打印样式
通过 CSS 的 @media print 可以专门为打印设置样式，隐藏不需要打印的元素。
<style>
@media print {
.no-print {
display: none;
}
body {
font-size: 12pt;
}
}
</style>创建打印专用组件
对于复杂的打印需求，可以创建一个专门的打印组件，动态生成打印内容。
<template>
<div>
<button @click="printContent">打印</button>
<div ref="printContent" class="print-content">
<!-- 动态内容 -->
</div>
</div>
</template>
<script>
export default {
methods: {
printContent() {
const printWindow = window.open('', '_blank');
printWindow.document.write(`
<html>
<head>
<title>打印内容</title>
<style>
body { font-family: Arial; }
/* 其他打印样式 */
</style>
</head>
<body>
${this.$refs.printContent.innerHTML}
</body>
</html>
`);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
}
}
</script>使用 html2canvas 和 jsPDF 生成 PDF 打印
对于需要将 HTML 转换为 PDF 打印的情况，可以使用 html2canvas 和 jsPDF 库。
安装依赖：
npm install html2canvas jspdf使用示例：
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export default {
methods: {
async printPDF() {
const element = document.getElementById('printArea');
const canvas = await html2canvas(element);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('document.pdf');
// 或者直接打印
// const blob = pdf.output('blob');
// window.open(URL.createObjectURL(blob));
}
}
}以上方法提供了从简单到复杂的多种 Vue 打印实现方案，可以根据项目需求选择合适的方式。
