vue 实现纯 web H5 打印功能

vue 实现纯 web H5 打印功能
官网：https://vxeui.com/
https://github.com/x-extends/vxe-pc-ui
安装

1. npm install vxe-pc-ui@4.3.22 vxe-table@4.9.19

复制代码

1. // ...
2. import VxeUI from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. import VxeUITable from 'vxe-table'
5. import 'vxe-table/lib/style.css'
6. // ...
8. createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
9. // ...

复制代码

打印图片

1. <template>
2.   
3.     <vxe-print ref="printRef" custom-layout>
4.       <img src="https://vxeui.com/resource/img/invoice345.png" >
5.     </vxe-print>
6.     <vxe-button @click="printEvent1">直接打印</vxe-button>
7.     <vxe-button @click="printEvent2">调用方法打印</vxe-button>
8.   
9. </template>

复制代码

自定义页眉

1. <template>
2.   
3.     <vxe-print ref="printRef">
4.       <template #header>
5.         自定义标题222222222
6.       </template>
8.       <vxe-print-page-break>
9.         第一页
10.         内容
11.         内容
12.       </vxe-print-page-break>
13.       <vxe-print-page-break>
14.         第二页
15.         内容
16.         内容
17.       </vxe-print-page-break>
18.       <vxe-print-page-break>
19.         第三页
20.         内容
21.         内容
22.       </vxe-print-page-break>
23.     </vxe-print>
24.     <vxe-button @click="printEvent1">直接打印</vxe-button>
25.     <vxe-button @click="printEvent2">调用方法打印</vxe-button>
26.   
27. </template>

复制代码

自定义页尾和页数

1. <template>
2.   
3.     <vxe-print ref="printRef" title="标题33">
4.       <vxe-print-page-break>
5.         第一页
6.         内容
7.         内容
8.       </vxe-print-page-break>
9.       <vxe-print-page-break>
10.         第二页
11.         内容
12.         内容
13.       </vxe-print-page-break>
14.       <vxe-print-page-break>
15.         第三页
16.         内容
17.         内容
18.       </vxe-print-page-break>
20.       <template #footer="{ currentPage, pageCount }">
21.         
22.           自定义页尾，当前页码：{{ currentPage }}/{{ pageCount }}
23.         
24.       </template>
25.     </vxe-print>
26.     <vxe-button @click="printEvent1">直接打印</vxe-button>
27.     <vxe-button @click="printEvent2">调用方法打印</vxe-button>
28.   
29. </template>

复制代码

分页打印表格

1. <template>
2.   
3.     <vxe-button @click="printEvent">分页打印表格</vxe-button>
5.     <vxe-table
6.       border
7.       height="500"
8.       ref="tableRef"
9.       :data="tableData">
10.       <vxe-column field="id" title="ID" width="60"></vxe-column>
11.       <vxe-column field="name" title="Name"></vxe-column>
12.       <vxe-column field="sex" title="Sex"></vxe-column>
13.       <vxe-column field="address" title="Address"></vxe-column>
14.     </vxe-table>
15.   
16. </template>

复制代码

https://gitee.com/x-extends/vxe-pc-ui

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！