在公司开发列表时，经常会遇到需求打印出货单，接下来分享如何在 vxe-table 灵活的使用打印功能，非常简单就能实现能自定义的出货单打印。安装npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3// ...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-button content="点击打印" @click="printEvent"></vxe-button> <div style="border: 1px solid #409eff; padding: 16px"> <div ref="topElRef"> <div style="margin-bottom: 8px;"> <div style="display: inline-block;width: 100%;"> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">商品名称：Vxe 企业授权</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">发货单号：X2665847132654</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">发货日期：2024-12-01</div> </div> <div style="display: inline-block;width: 100%;"> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">收货姓名：小徐</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">收货地址：火星第七区18号001</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">联系电话：10086</div> </div> </div> </div> <vxe-table border ref="tableRef" height="300" :print-config="{}" :data="tableData"> <vxe-column type="checkbox" width="60"></vxe-column> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="name" title="名称"></vxe-column> <vxe-column field="code" title="编码"></vxe-column> <vxe-column field="num" title="数量"></vxe-column> <vxe-column field="price" title="价格"></vxe-column> <vxe-column field="taxRate" title="税率"></vxe-column> </vxe-table> <div ref="bottomElRef"> <div style="margin-top: 30px;text-align: right;"> <div style="display: inline-block;width: 100%;"> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;"></div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">创建人：小徐</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">创建日期：2024-12-01</div> </div> </div> </div> </div> </div></template><script>import { VxeUI } from 'vxe-table'export default { data () { const tableData = [ { id: 10001, name: '筛选插件', code: 'T1', price: 1200, num: 1, taxRate: '3%' }, { id: 10002, name: '区域选取插件', code: 'T2', price: 16840, num: 3, taxRate: '3%' }, { id: 10003, name: '单元格选取插件', code: 'T3', price: 8460, num: 3, taxRate: '3%' }, { id: 10004, name: 'Excel 筛选插件', code: 'T4', price: 980, num: 2, taxRate: '3%' }, { id: 10005, name: '零代码平台模板', code: 'T5', price: 23199, num: 5, taxRate: '3%' }, { id: 10006, name: '后台管理系统模板', code: 'T6', price: 899, num: 7, taxRate: '3%' }, { id: 10007, name: '低代码设计器插件', code: 'T7', price: 1688, num: 4, taxRate: '3%' }, { id: 10008, name: '可视化拖拽插件', code: 'T8', price: 1299, num: 4, taxRate: '3%' } ] return { tableData } }, methods: { async printEvent () { const $table = this.$refs.tableRef if ($table) { const printRest = await $table.getPrintHtml() const topEl = this.$refs.topElRef const bottomEl = this.$refs.bottomElRef const topHtml = topEl ? topEl.innerHTML : '' const bottomHtml = bottomEl ? bottomEl.innerHTML : '' VxeUI.print({ title: '出货单据', pageBreaks: [ // 第一页 { bodyHtml: topHtml + printRest.html + bottomHtml } ] }) } } }}</script>转载自https://www.cnblogs.com/qaz666/p/18560674

安装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>

TinyVue是一个跨端跨框架的企业级UI组件库，基于renderless无渲染组件设计架构，实现了一套代码同时支持Vue2和Vue3，支持PC和移动端，包含100多个功能丰富的精美组件，可帮助开发者高效开发Web应用。  4月28日晚19点，泽瑞科技前端架构师、鸿蒙开源布道师、阿里友盟KOL将为大家分享如何基于TinyVue组件库定制企业级UI体系，欢迎大家进入直播间一起讨论

正常情况下如果需要使用文本超出隐藏，通过 css 就可以完成overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是如果需要实现多行文本溢出，就很难实现里，谷歌浏览器虽然支持 css 多行溢出，大部分浏览器又不支持，所以作用也不大。可以通过 vxe-text-ellipsis 来实现多行文本溢出隐藏。安装npm install vxe-pc-ui// ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'// ...createApp(App).use(VxeUI).mount('#app')// ...参数 line-clamp 用于指定多少行自动隐藏溢出。单行<template> <div style="width: 400px;"> <vxe-text-ellipsis line-clamp="1" content="这是一个单行文本，超出一行之后会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis> </div></template>多行<template> <div style="width: 400px;"> <vxe-text-ellipsis line-clamp="4" content="这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis> </div></template>在表格中使用<template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div></template><script>export default { data () { const addressCellRender = { name: 'VxeTextEllipsis', props: { lineClamp: 3 } } const gridOptions = { border: true, height: 500, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'sex', title: 'Sex', width: 100 }, { field: 'address', title: '多行文本溢出省略', width: 400, cellRender: addressCellRender } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: '这是一个多行的文本溢出省略组件' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。' }, { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 42, address: '这是一个多行的文本溢出省略组件' }, { id: 10006, name: 'Test6', role: 'PM', sex: 'Women', age: 36, address: '这是一个多行的文本溢出省略组件' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 39, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。' }, { id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 56, address: '这是一个多行的文本溢出省略组件' } ] } return { gridOptions, addressCellRender } }}</script>

<template> <div> <vxe-button content="点击弹出" @click="showPopup = true"></vxe-button> <vxe-modal v-model="showPopup" title="标题1" :width="600" :height="400" resize> <div>鼠标点击窗口边缘，按住边缘拖拽调整窗口宽和高</div> <div>按住头部移动！</div> <div>按住左边距拖动！</div> <div>按住右边距拖动！</div> <div>按住底边距拖动！</div> <div>按住左下角拖动 ！</div> <div>按住右下角拖动！</div> </vxe-modal> </div> </template> <script> export default { data () { return { showPopup: false } } } </script>

<template> <div> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { return { num: 1 } }, methods: { openEvent () { VxeUI.modal.open({ title: `标题 ${this.num}`, content: `我是第 ${this.num} 个`, mask: false, lockView: false, escClosable: true, width: 600, height: 400, showZoom: true }) this.num++ } } } </script>

<template> <div> <p> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </p> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { return { num: 1 } }, methods: { openEvent () { VxeUI.modal.open({ title: '标题1', content: `每点击一次弹出一个，第 ${this.num++} 个`, mask: false, lockView: false, width: 600, height: 400 }) } } } </script>

<template> <div> <p> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </p> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { return { num: 1 } }, methods: { openEvent () { VxeUI.modal.open({ title: '标题1', content: `每点击一次弹出一个，第 ${this.num++} 个`, mask: false, lockView: false, width: 600, height: 400 }) } } } </script>

<template> <div> <vxe-button content="点击弹出" @click="showPopup = true"></vxe-button> <vxe-modal v-model="showPopup" :width="600" :height="400"> <div>鼠标点击头部，按住移动窗口</div> </vxe-modal> </div> </template> <script> export default { data () { return { showPopup: false } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { validConfig: { theme: 'beautify' }, data: { name: '', nickname: '', sex: '', age: '' }, rules: { name: [ { required: true, message: '请输入名称' } ], sex: [ { required: true, message: '请选择性别' } ], age: [ { required: true, message: '请输入年龄' } ] }, items: [ { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } }, { align: 'center', span: 24, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '提交', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) }, resetEvent () { VxeUI.modal.message({ content: '重置事件', status: 'info' }) } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { validConfig: { theme: 'beautify' }, data: { name: '', nickname: '', sex: '', age: '' }, rules: { name: [ { required: true, message: '请输入名称' } ], sex: [ { required: true, message: '请选择性别' } ], age: [ { required: true, message: '请输入年龄' } ] }, items: [ { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } }, { align: 'center', span: 24, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '提交', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) }, resetEvent () { VxeUI.modal.message({ content: '重置事件', status: 'info' }) } } } </script>

<template> <div> <vxe-form v-bind="formOptions"></vxe-form> </div> </template> <script> export default { data () { const sexItemRender = { name: 'VxeSelect', options: [ { label: '女', value: 'Women' }, { label: '男', value: 'Man' } ] } const formOptions = { border: true, titleBackground: true, verticalAlign: 'center', titleWidth: 100, data: { name: 'test1', nickname: '', sex: '', age: '', address: '' }, items: [ { field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'nickname', title: '昵称', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, itemRender: sexItemRender }, { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'address', title: '地址', span: 24, itemRender: { name: 'VxeTextarea' } } ] } return { formOptions } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { vertical: true, data: { name: 'test1', nickname: '', sex: '', age: '', address: '' }, items: [ { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'address', title: '地址', span: 24, itemRender: { name: 'VxeTextarea' } }, { align: 'center', span: 24, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '提交', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) }, resetEvent () { VxeUI.modal.message({ content: '重置事件', status: 'info' }) } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { data: { name: 'test1', nickname: 'Testing', sex: '', age: '' }, items: [ { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, titlePrefix: { content: '左边图标', icon: 'vxe-icon-user-fill' }, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } }, { align: 'center', span: 24, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '提交', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) }, resetEvent () { VxeUI.modal.message({ content: '重置事件', status: 'info' }) } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { titleWidth: 100, titleColon: true, titleAlign: 'right', data: { name: 'test1', role: '', nickname: 'Testing', sex: '', age: '', num: '', createDate: '', updateDate: '' }, items: [ { field: 'name', title: '名称', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'nickname', title: '昵称', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'role', title: '角色', span: 12, folding: true, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, folding: true, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 12, folding: true, itemRender: { name: 'VxeInput' } }, { field: 'num', title: '大小', span: 12, folding: true, itemRender: { name: 'VxeInput' } }, { field: 'createDate', title: '创建时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } }, { field: 'updateDate', title: '更新时间', span: 12, folding: true, itemRender: { name: 'VxeInput' } }, { align: 'center', span: 24, collapseNode: true, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '搜索', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) } } } </script>