vue3项目使用浏览器打印功能

最新推荐文章于 2025-05-28 16:49:57 发布

原创最新推荐文章于 2025-05-28 16:49:57 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了在Vue3项目中如何安装和使用vue3-print-nb插件进行页面打印，包括全局和局部引入方式，以及打印整个页面、特定区域和URL的方法，并提供了处理打印时可能出现的问题，如高度设置导致的空白页的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.安装依赖并引入

npm install vue3-print-nb --save

全局引入：

import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

局部引入：

import print from 'vue3-print-nb'

directives: {
    print
}

2.项目中使用

打印整个页面：

<template>
	<button v-print>打印</button>
</template>

打印某个区域：

<template>
	<!-- <button v-print="'#printMe'">打印</button> -->
	<button v-print="printObj">打印</button>
	<div id="printMe">
		这里是需要打印的内容
	</div>
</template>

<script setup>
const printObj = {
	id: 'printMe',
	popTitle: '页眉标题',
	extraCss: '',
	extraHead: '',
	beforeOpenCallback (vue) {
    	console.log('打开之前');
    },
    openCallback (vue) {
    	console.log('执行了打印');
    },
    closeCallback (vue) {
    	console.log('关闭了打印工具');
    },
};
</script>

打印URL：

<template>
	<button v-print="printObj">打印</button>
</template>

<script setup>
const printObj = {
	url: 'http://localhost:8080/',
};
</script>

3.注意事项

当 html、body 标签设置 height=“100%” 时会导致打印页面多出一个空白页。
可以通过设置 extraHead 解决：

<script setup>
const printObj = {
	id: 'printMe',
	extraHead: `
		<style>
			html, body {
				height: auto !important;
			}
		</style>
	`,
};
</script>