admin管理员组文章数量:1130349
vue vxe-print 实现纯 web H5 打印功能，不需要额外安装浏览器插件，纯浏览器 Web 打印
官网：https://vxeui/
https://github/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/resource/img/invoice345.png" style="width: 100%;">
</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 printEvent1 = () => {
const $print = printRef.value
if ($print) {
$print.print()
}
}
const printEvent2 = () => {
VxeUI.print({
html: `
<img src="https://vxeui/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 setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const printRef = ref()
const printEvent1 = () => {
const $print = printRef.value
if ($print) {
$print.print()
}
}
const 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" show-page-number>
<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 setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const printRef = ref()
const printEvent1 = () => {
const $print = printRef.value
if ($print) {
$print.print()
}
}
const printEvent2 = () => {
VxeUI.print({
title: '标题33',
showPageNumber: true,
pageBreaks: [
{
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 setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-table'
import XEUtils from 'xe-utils'
const tableRef = ref()
const list = []
for (let i = 0; i < 100; i++) {
list.push({
id: 10001 + i,
name: 'Test1',
role: 'Develop',
sex: 'Man',
address: 'test abc'
})
}
const tableData = ref(list)
const printEvent = () => {
const $table = tableRef.value
if ($table) {
// 分割每页26条
Promise.all(XEUtils.chunk(tableData.value, 26).map(pageData => {
return $table.getPrintHtml({
data: pageData
}).then(({ html }) => {
return {
bodyHtml: html
}
})
})).then(pageBreaks => {
VxeUI.print({
title: '分页打印表格',
showPageNumber: true,
pageBreaks
})
})
}
}
</script>
https://gitee/x-extends/vxe-pc-ui
vue vxe-print 实现纯 web H5 打印功能，不需要额外安装浏览器插件，纯浏览器 Web 打印
官网：https://vxeui/
https://github/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/resource/img/invoice345.png" style="width: 100%;">
</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 printEvent1 = () => {
const $print = printRef.value
if ($print) {
$print.print()
}
}
const printEvent2 = () => {
VxeUI.print({
html: `
<img src="https://vxeui/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 setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const printRef = ref()
const printEvent1 = () => {
const $print = printRef.value
if ($print) {
$print.print()
}
}
const 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" show-page-number>
<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 setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-pc-ui'
const printRef = ref()
const printEvent1 = () => {
const $print = printRef.value
if ($print) {
$print.print()
}
}
const printEvent2 = () => {
VxeUI.print({
title: '标题33',
showPageNumber: true,
pageBreaks: [
{
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 setup>
import { ref } from 'vue'
import { VxeUI } from 'vxe-table'
import XEUtils from 'xe-utils'
const tableRef = ref()
const list = []
for (let i = 0; i < 100; i++) {
list.push({
id: 10001 + i,
name: 'Test1',
role: 'Develop',
sex: 'Man',
address: 'test abc'
})
}
const tableData = ref(list)
const printEvent = () => {
const $table = tableRef.value
if ($table) {
// 分割每页26条
Promise.all(XEUtils.chunk(tableData.value, 26).map(pageData => {
return $table.getPrintHtml({
data: pageData
}).then(({ html }) => {
return {
bodyHtml: html
}
})
})).then(pageBreaks => {
VxeUI.print({
title: '分页打印表格',
showPageNumber: true,
pageBreaks
})
})
}
}
</script>
https://gitee/x-extends/vxe-pc-ui
版权声明：本文标题：vue vxe-print 实现纯 web H5 打印功能 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1754668085a2713981.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论