当前位置：首页 > news >正文

vue vxe-print 打印设置边距、页头页尾高度样式

news 来源：原创 2025/5/13 11:03:11

官网：https://vxeui.com
github：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui

设置边距

通过设置 page-style.margin 设置打印的页面边距，设置为0 就可以去掉边距

在这里插入图片描述

<template><div><vxe-print ref="printRef" :page-style="pageStyle"><vxe-print-page-break><div>第一页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></vxe-print-page-break><vxe-print-page-break><div>第二页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></vxe-print-page-break></vxe-print><vxe-button @click="printEvent1">直接打印</vxe-button><vxe-button @click="printEvent2">调用方法打印</vxe-button></div>
</template><script setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const printRef = ref()const pageStyle = ref({margin: 0
})const printEvent1 = () => {const $print = printRef.valueif ($print) {$print.print()}
}const printEvent2 = () => {VxeUI.print({pageStyle: {margin: 0},pageBreaks: [{bodyHtml: `<div>第一页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>`},{bodyHtml: `<div>第二页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>`}]})
}
</script>

页头页尾高度

在这里插入图片描述

<template><div><vxe-print ref="printRef" title="打印标题" :page-style="pageStyle" show-page-number><vxe-print-page-break><div>第一页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></vxe-print-page-break><vxe-print-page-break><div>第二页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></vxe-print-page-break></vxe-print><vxe-button @click="printEvent1">直接打印</vxe-button><vxe-button @click="printEvent2">调用方法打印</vxe-button></div>
</template><script setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const printRef = ref()
const pageStyle = ref({marginLeft: 16,marginRight: 16,header: {height: 40},footer: {height: 30}
})const printEvent1 = () => {const $print = printRef.valueif ($print) {$print.print()}
}const printEvent2 = () => {VxeUI.print({title: '打印标题',pageStyle: {marginLeft: 16,marginRight: 16,header: {height: 40},footer: {height: 30}},showPageNumber: true,pageBreaks: [{bodyHtml: `<div>第一页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>`},{bodyHtml: `<div>第二页</div><div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>`}]})
}
</script>