vue 实现纯 web H5 打印功能
vue 实现纯 web H5 打印功能官网：https://vxeui.com/
https://github.com/x-extends/vxe-pc-ui
安装
npm install vxe-pc-ui@4.3.22 vxe-table@4.9.19// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...
createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...打印图片
<template>
<vxe-print ref="printRef" custom-layout>
<img src="https://vxeui.com/resource/img/invoice345.png" >
</vxe-print>
<vxe-button @click="printEvent1">直接打印</vxe-button>
<vxe-button @click="printEvent2">调用方法打印</vxe-button>
</template>自定义页眉
<template>
<vxe-print ref="printRef">
<template #header>
自定义标题222222222
</template>
<vxe-print-page-break>
第一页
内容
内容
</vxe-print-page-break>
<vxe-print-page-break>
第二页
内容
内容
</vxe-print-page-break>
<vxe-print-page-break>
第三页
内容
内容
</vxe-print-page-break>
</vxe-print>
<vxe-button @click="printEvent1">直接打印</vxe-button>
<vxe-button @click="printEvent2">调用方法打印</vxe-button>
</template>自定义页尾和页数
<template>
<vxe-print ref="printRef" title="标题33">
<vxe-print-page-break>
第一页
内容
内容
</vxe-print-page-break>
<vxe-print-page-break>
第二页
内容
内容
</vxe-print-page-break>
<vxe-print-page-break>
第三页
内容
内容
</vxe-print-page-break>
<template #footer="{ currentPage, pageCount }">
自定义页尾，当前页码：{{ currentPage }}/{{ pageCount }}
</template>
</vxe-print>
<vxe-button @click="printEvent1">直接打印</vxe-button>
<vxe-button @click="printEvent2">调用方法打印</vxe-button>
</template>分页打印表格
<template>
<vxe-button @click="printEvent">分页打印表格</vxe-button>
<vxe-table
border
height="500"
ref="tableRef"
:data="tableData">
<vxe-column field="id" title="ID" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-table>
</template>https://gitee.com/x-extends/vxe-pc-ui
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]