vue vxe-print 打印设置边距、页头页尾高度样式
<p>vue vxe-print 打印设置边距、页头页尾高度样式</p><p>官网：https://vxeui.com<br>
github：https://github.com/x-extends/vxe-pc-ui<br>
gitee：https://gitee.com/x-extends/vxe-pc-ui</p>
<h2 id="设置边距">设置边距</h2>
<p>通过设置 page-style.margin 设置打印的页面边距，设置为0 就可以去掉边距</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202505/3563285-20250512134245054-1473277238.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202505/3563285-20250512134404611-1926218158.png"></p>
<pre><code class="language-html"><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.value
if ($print) {
$print.print()
}
}
const printEvent2 = () => {
VxeUI.print({
pageStyle: {
margin: 0
},
pageBreaks: [
{
bodyHtml: `
<div>第一页</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
`
},
{
bodyHtml: `
<div>第二页</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
`
}
]
})
}
</script>
</code></pre>
<h2 id="页头页尾高度">页头页尾高度</h2>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202505/3563285-20250512134257029-1393154082.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202505/3563285-20250512134304809-1599209715.png"></p>
<pre><code class="language-html"><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.value
if ($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>
</code></pre>
<p>https://gitee.com/x-extends/vxe-pc-ui</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/18872484
頁:
[1]