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>
<div>
<vxe-print ref="printRef" custom-layout>
<img src="https://vxeui.com/resource/img/invoice345.png" style="width: 100%;">
</vxe-print>
<vxe-button @click="printEvent1">直接打印</vxe-button>
<vxe-button @click="printEvent2">调用方法打印</vxe-button>
</div>
</template>
<script>
import { VxeUI } from 'vxe-pc-ui'
export default {
data () {
return {}
},
methods: {
printEvent1 () {
const $print = this.$refs.printRef
if ($print) {
$print.print()
}
},
printEvent2 () {
VxeUI.print({
html: `
<img src="https://vxeui.com/resource/img/invoice345.png" style="width: 100%;">
`
})
}
}
}
</script>
自定义页眉
<template>
<div>
<vxe-print ref="printRef">
<template #header>
<div style="font-size: 20px;padding-top: 20px;text-align: center;">自定义标题222222222</div>
</template>
<vxe-print-page-break>
<div>第一页</div>
<div>内容</div>
<div>内容</div>
</vxe-print-page-break>
<vxe-print-page-break>
<div>第二页</div>
<div>内容</div>
<div>内容</div>
</vxe-print-page-break>
<vxe-print-page-break>
<div>第三页</div>
<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>
import { VxeUI } from 'vxe-pc-ui'
export default {
data () {
return {}
},
methods: {
printEvent1 () {
const $print = this.$refs.printRef
if ($print) {
$print.print()
}
},
printEvent2 () {
VxeUI.print({
headerHtml: '<div style="font-size: 20px;padding-top: 20px;text-align: center;">自定义标题222222222</div>',
pageBreaks: [
{
bodyHtml: `
<div>第一页</div>
<div>内容</div>
<div>内容</div>
`
},
{
bodyHtml: `
<div>第二页</div>
<div>内容</div>
<div>内容</div>
`
},
{
bodyHtml: `
<div>第三页</div>
<div>内容</div>
<div>内容</div>
`
}
]
})
}
}
}
</script>
自定义页尾和页数
<template>
<div>
<vxe-print ref="printRef" title="标题33">
<vxe-print-page-break>
<div>第一页</div>
<div>内容</div>
<div>内容</div>
</vxe-print-page-break>
<vxe-print-page-break>
<div>第二页</div>
<div>内容</div>
<div>内容</div>
</vxe-print-page-break>
<vxe-print-page-break>
<div>第三页</div>
<div>内容</div>
<div>内容</div>
</vxe-print-page-break>
<template #footer="{ currentPage, pageCount }">
<div style="font-size: 20px;padding-top: 20px;text-align: center;">
<span>自定义页尾,当前页码:{{ currentPage }}/{{ pageCount }}</span>
</div>
</template>
</vxe-print>
<vxe-button @click="printEvent1">直接打印</vxe-button>
<vxe-button @click="printEvent2">调用方法打印</vxe-button>
</div>
</template>
<script>
import { VxeUI } from 'vxe-pc-ui'
export default {
data () {
return {}
},
methods: {
printEvent1 () {
const $print = this.$refs.printRef
if ($print) {
$print.print()
}
},
printEvent2 () {
VxeUI.print({
title: '标题33',
footerHtml ({ currentPage, pageCount }) {
return `
<div style="font-size: 20px;padding-top: 20px;text-align: center;">
<span>自定义页尾,当前页码:${currentPage}/${pageCount}</span>
</div>`
},
pageBreaks: [
{
bodyHtml: `
<div>第一页</div>
<div>内容</div>
<div>内容</div>
`
},
{
bodyHtml: `
<div>第二页</div>
<div>内容</div>
<div>内容</div>
`
},
{
bodyHtml: `
<div>第三页</div>
<div>内容</div>
<div>内容</div>
`
}
]
})
}
}
}
</script>
分页打印表格
<template>
<div>
<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>
</div>
</template>
<script>
import { VxeUI } from 'vxe-table'
import XEUtils from 'xe-utils'
export default {
data () {
return {
tableData: []
}
},
methods: {
printEvent () {
const $table = this.$refs.tableRef
if ($table) {
// 分割每页26条
Promise.all(XEUtils.chunk(this.tableData, 26).map(pageData => {
return $table.getPrintHtml({
data: pageData
}).then(({ html }) => {
return {
bodyHtml: html
}
})
})).then(pageBreaks => {
VxeUI.print({
title: '分页打印表格',
showPageNumber: true,
pageBreaks
})
})
}
}
},
created () {
const list = []
for (let i = 0; i < 100; i++) {
list.push({
id: 10001 + i,
name: 'Test1',
role: 'Develop',
sex: 'Man',
address: 'test abc'
})
}
this.tableData = list
}
}
</script>
分类:
vxe-ui
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体