安装vue-print-nb

npm i vue-print-nb --save

在main.js文件中导入

import Print from 'vue-print-nb'
Vue.use(Print);

使用

• 使用id

<template>
	<div>
		<button v-print="'#printcontent'">打印</button>
		<div>888</div>
		<div id="printcontent">
			<p>123</p>
			<p style="margin-top: 30px; font-size: 30px">123</p>
			<p>123</p>
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</div>
</template>
<script>
export default {
};
</script>
<style>
</style>

• 使用ref
  此方法暂未得到验证…
• printObj

<template>
	<div>
		<button v-print="printObj">打印</button>
		<div>888</div>
		<div id="printcontent">
			<p>123</p>
			<p style="margin-top: 30px; font-size: 30px">123</p>
			<p>123</p>
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</div>
</template>
<script>
export default {
    data() {
        return {
            printObj: {
                id: "printcontent",
                popTitle: 'good print',   // 标题
                extraCss: 'https://www.google.com,https://www.google.com',
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            }
        }
    },
};
</script>
<style>
</style>

设置页眉页脚

<style lang="scss" scoped>
// 设置页眉页脚
@page {
	size: auto;
	margin: 10mm 5mm 10mm 5mm;
}
</style>

效果图

<style lang="scss" scoped>
// 设置页眉页脚
@page {
	size: auto;
	margin: 10mm 5mm 10mm 5mm;
}
</style>

效果图