mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
960 lines
33 KiB
Vue
960 lines
33 KiB
Vue
<template>
|
||
<div>
|
||
<p class="tip">
|
||
高级打印，可以将任意视图的 HTML 片段输出打印<br>
|
||
给 vue 实例挂载属性：<br>
|
||
app.config.globalProperties.$XPrint = VXETable.print<br>
|
||
</p>
|
||
|
||
<vxe-toolbar ref="xToolbar" print>
|
||
<template #buttons>
|
||
<vxe-button content="打印表格" @click="printEvent1"></vxe-button>
|
||
<vxe-button content="打印勾选行" @click="printSelectEvent1"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<vxe-table
|
||
border
|
||
ref="xTable"
|
||
height="300"
|
||
:print-config="{}"
|
||
:data="demo1.tableData">
|
||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||
<vxe-column type="seq" width="60"></vxe-column>
|
||
<vxe-column field="name" title="Name"></vxe-column>
|
||
<vxe-column field="role" title="Role"></vxe-column>
|
||
<vxe-column field="age" title="Age"></vxe-column>
|
||
<vxe-column field="address" title="Address"></vxe-column>
|
||
</vxe-table>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[0] }}</pre-code>
|
||
<pre-code class="typescript">{{ demoCodes[1] }}</pre-code>
|
||
</pre>
|
||
|
||
<p class="tip">打印 HTML 元素</p>
|
||
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印下面的区域" @click="printEvent5"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<div id="myPrint5">
|
||
<div>
|
||
<p>将当前渲染的<span style="color: #20f320">内容</span>打印出来，仅<span style="color: blue;font-size: 20px">打印</span>内联<span style="color: red">样式</span></p>
|
||
<p>内容<span style="font-size: 30px;font-weight: 700">区域</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[2] }}</pre-code>
|
||
<pre-code class="typescript">{{ demoCodes[3] }}</pre-code>
|
||
</pre>
|
||
|
||
<p class="tip">打印条形码：先用第三方 <a class="link" href="https://www.npmjs.com/package/jsbarcode" target="_blank">jsbarcode</a> 库生成条形码，再用打印模块输出打印</p>
|
||
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印条形码" @click="printEvent2"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[4] }}</pre-code>
|
||
<pre-code class="typescript">{{ demoCodes[5] }}</pre-code>
|
||
</pre>
|
||
|
||
<p class="tip">打印二维码：先用第三方 <a class="link" href="https://www.npmjs.com/package/qrcode" target="_blank">qrcode</a> 库生成二维码，再用打印模块输出打印</p>
|
||
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印二维码" @click="printEvent3"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[6] }}</pre-code>
|
||
<pre-code class="typescript">{{ demoCodes[7] }}</pre-code>
|
||
</pre>
|
||
|
||
<p class="tip">打印自定义模板</p>
|
||
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印自定义模板" @click="printEvent4"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[8] }}</pre-code>
|
||
<pre-code class="typescript">{{ demoCodes[9] }}</pre-code>
|
||
</pre>
|
||
|
||
<p class="tip">打印图片</p>
|
||
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印图片" @click="printEvent6"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<img id="myPrint6" src="/vxe-table/static/other/invoice.png" style="width: 300px">
|
||
|
||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||
|
||
<pre>
|
||
<pre-code class="xml">{{ demoCodes[10] }}</pre-code>
|
||
<pre-code class="typescript">{{ demoCodes[11] }}</pre-code>
|
||
</pre>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, reactive, ref, nextTick } from 'vue'
|
||
import { VXETable } from '../../../packages/all'
|
||
import { VxeTableInstance, VxeToolbarInstance } from '../../../types/index'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const xTable = ref({} as VxeTableInstance)
|
||
const xToolbar = ref({} as VxeToolbarInstance)
|
||
|
||
// 打印样式
|
||
const printStyle = `
|
||
.title {
|
||
text-align: center;
|
||
}
|
||
.my-list-row {
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
.my-list-col {
|
||
float: left;
|
||
width: 33.33%;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
}
|
||
.my-top,
|
||
.my-bottom {
|
||
font-size: 12px;
|
||
}
|
||
.my-top {
|
||
margin-bottom: 5px;
|
||
}
|
||
.my-bottom {
|
||
margin-top: 30px;
|
||
text-align: right;
|
||
}
|
||
`
|
||
|
||
// 打印顶部内容模板
|
||
const topHtml = `
|
||
<h1 class="title">出货单据</h1>
|
||
<div class="my-top">
|
||
<div class="my-list-row">
|
||
<div class="my-list-col">商品名称：vxe-table</div>
|
||
<div class="my-list-col">发货单号：X2665847132654</div>
|
||
<div class="my-list-col">发货日期：2020-09-20</div>
|
||
</div>
|
||
<div class="my-list-row">
|
||
<div class="my-list-col">收货姓名：小徐</div>
|
||
<div class="my-list-col">收货地址：火星第七区18号001</div>
|
||
<div class="my-list-col">联系电话：10086</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
// 打印底部内容模板
|
||
const bottomHtml = `
|
||
<div class="my-bottom">
|
||
<div class="my-list-row">
|
||
<div class="my-list-col"></div>
|
||
<div class="my-list-col">创建人：小徐</div>
|
||
<div class="my-list-col">创建日期：2020-09-20</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
const demo1 = reactive({
|
||
tableData: [
|
||
{ id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
|
||
{ id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Shanghai' },
|
||
{ id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Beijing' },
|
||
{ id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
|
||
{ id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shenzhen' },
|
||
{ id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
|
||
{ id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
|
||
{ id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
|
||
]
|
||
})
|
||
|
||
const printEvent1 = () => {
|
||
const $table = xTable.value
|
||
$table.print({
|
||
sheetName: '打印出货单据',
|
||
style: printStyle,
|
||
columns: [
|
||
{ type: 'seq' },
|
||
{ field: 'name' },
|
||
{ field: 'role' },
|
||
{ field: 'address' }
|
||
],
|
||
beforePrintMethod: ({ content }) => {
|
||
// 拦截打印之前，返回自定义的 html 内容
|
||
return topHtml + content + bottomHtml
|
||
}
|
||
})
|
||
}
|
||
|
||
const printSelectEvent1 = () => {
|
||
const $table = xTable.value
|
||
$table.print({
|
||
sheetName: '打印勾选行',
|
||
style: printStyle,
|
||
mode: 'selected',
|
||
columns: [
|
||
{ type: 'seq' },
|
||
{ field: 'name' },
|
||
{ field: 'role' },
|
||
{ field: 'address' }
|
||
],
|
||
beforePrintMethod: ({ content }) => {
|
||
// 拦截打印之前，返回自定义的 html 内容
|
||
return topHtml + content + bottomHtml
|
||
}
|
||
})
|
||
}
|
||
|
||
nextTick(() => {
|
||
// 将表格和工具栏进行关联
|
||
const $table = xTable.value
|
||
const $toolbar = xToolbar.value
|
||
$table.connect($toolbar)
|
||
})
|
||
|
||
const codeList = [
|
||
{ name: '某年xx1', price: 340, code: '1201545742000' },
|
||
{ name: 'vue 开发指南', price: 99, code: '1271545042006' },
|
||
{ name: 'test abc', price: 288, code: '1001545847781' },
|
||
{ name: 'vue 进阶用法', price: 188, code: '1201511842009' },
|
||
{ name: '某某xx2', price: 860, code: '1201543242003' },
|
||
{ name: 'js 从入门到精通', price: 99, code: '1201775849605' },
|
||
{ name: 'vxe-table pro test abc', price: 888, code: '1201775112606' },
|
||
{ name: 'js 进阶宝典', price: 166, code: '1201775849608' }
|
||
]
|
||
|
||
const printEvent2 = () => {
|
||
// 打印样式
|
||
const printStyle = `
|
||
.barcode {
|
||
display: inline-block;
|
||
width: 50%;
|
||
height: 240px;
|
||
float: left;
|
||
text-align: center;
|
||
}
|
||
`
|
||
// 打印模板
|
||
const printTmpls: string[] = []
|
||
codeList.forEach(item => {
|
||
const img = document.createElement('img')
|
||
// 生成条形码
|
||
const tmpl = `
|
||
<div class="barcode">
|
||
<p>${item.name}</p>
|
||
${img.outerHTML}
|
||
<p>统一售价：￥${item.price}</p>
|
||
</div>
|
||
`
|
||
printTmpls.push(tmpl)
|
||
})
|
||
VXETable.print({
|
||
sheetName: '打印条形码模板',
|
||
style: printStyle,
|
||
content: printTmpls.join('')
|
||
})
|
||
}
|
||
|
||
const printEvent3 = () => {
|
||
// 打印样式
|
||
const printStyle = `
|
||
.title,
|
||
.qrcode {
|
||
text-align: center;
|
||
}
|
||
`
|
||
// 生成二维码
|
||
// 打印模板
|
||
const printTmpl = `
|
||
<p class="title">扫一扫二维码</p>
|
||
<div class="qrcode">
|
||
<img src="">
|
||
<div style="margin-top: 15px;">如果对您有帮助，点击右上角支持我们吧！</div>
|
||
</div>
|
||
`
|
||
VXETable.print({
|
||
sheetName: '打印二维码模板',
|
||
style: printStyle,
|
||
content: printTmpl
|
||
})
|
||
}
|
||
|
||
const printEvent4 = () => {
|
||
// 打印样式
|
||
const printStyle = `
|
||
.page-1 {
|
||
height: 1000px;
|
||
}
|
||
.page-2 {
|
||
padding: 15px 0;
|
||
}
|
||
.fill-row {
|
||
display: block;
|
||
font-size: 14px;
|
||
height: 36px;
|
||
}
|
||
.fill-span {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
height: 36px;
|
||
}
|
||
.fill-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.fill-empty,
|
||
.fill-part {
|
||
display: inline-block;
|
||
vertical-align: bottom;
|
||
border-bottom: 1px solid #000;
|
||
}
|
||
.number {
|
||
width: 250px;
|
||
margin-top: 40px;
|
||
}
|
||
.number .fill-empty {
|
||
width: 160px;
|
||
}
|
||
.title {
|
||
text-align: center;
|
||
margin: 80px 0;
|
||
}
|
||
.info-a,
|
||
.info-b {
|
||
margin: 0 auto;
|
||
width: 400px;
|
||
text-align: right;
|
||
}
|
||
.info-a .fill-row,
|
||
.info-b .fill-row {
|
||
height: 48px;
|
||
}
|
||
.info-a .fill-empty,
|
||
.info-b .fill-empty {
|
||
width: 200px;
|
||
}
|
||
.info-b {
|
||
margin-top: 80px;
|
||
}
|
||
.list-desc {
|
||
padding-left: 15px;
|
||
}
|
||
`
|
||
// 打印模板
|
||
const printTmpl = `
|
||
<div class="page-1">
|
||
<div class="fill-row number">
|
||
<span class="fill-title">编号：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<h1 class="title">劳动合同书</h1>
|
||
<div class="info-a">
|
||
<div class="fill-row">
|
||
<span class="fill-title">甲方（用人单位名称）名称：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">住址：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">法定代表人（委托代理人）：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
</div>
|
||
<div class="info-b">
|
||
<div class="fill-row">
|
||
<span class="fill-title">乙方（劳动者）姓名：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">性别：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">住址：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">居民身份证号：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">联系电话：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-2">
|
||
<p> 甲乙双方根据《中国人民共和国劳动合同法》等法律、法规、规章的规定，在平等、自愿、协商一致的基础上，同意订立本劳动合同，共同遵守本合同所列条款。</p>
|
||
<h2>一：合同类型的期限</h2>
|
||
<div class="list-desc">
|
||
<p>第一条 甲、乙双方选择以下第<span class="fill-part" style="width: 100px"></span>等形式确定本合同期限：</p>
|
||
<div class="list-desc">
|
||
<p>1、固定期限：自<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日起至<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日止。</p>
|
||
<p>2、无固定期限：自<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日起至<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日止</p>
|
||
<p>3、以完成一定的工作（任务）为期限：自<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日起至工作（任务）完成时即行终止。</p>
|
||
<p>双方约定的试用期限<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日只，期限为<span class="fill-part" style="width: 40px"></span>月</p>
|
||
</div>
|
||
</div>
|
||
<h2>二：工作内容和工作地点</h2>
|
||
<div class="list-desc">...省略</div>
|
||
<h2>三：工作时间和休息休假</h2>
|
||
<div class="list-desc">...省略</div>
|
||
<div style="margin-top: 15px;">如果对您有帮助，点击右上角支持我们吧！</div>
|
||
</div>
|
||
`
|
||
VXETable.print({
|
||
sheetName: '打印自定义模板',
|
||
style: printStyle,
|
||
content: printTmpl
|
||
})
|
||
}
|
||
|
||
const printEvent5 = () => {
|
||
const divEl = document.getElementById('myPrint5') as HTMLDivElement
|
||
VXETable.print({
|
||
sheetName: '打印下面区域',
|
||
content: divEl.innerHTML
|
||
})
|
||
}
|
||
|
||
const printEvent6 = () => {
|
||
const imgEl = document.getElementById('myPrint6') as HTMLImageElement
|
||
VXETable.print({
|
||
sheetName: '打印图片',
|
||
style: `
|
||
img {
|
||
width: 100%;
|
||
}
|
||
`,
|
||
content: `<img src="${imgEl.src}">`
|
||
})
|
||
}
|
||
|
||
return {
|
||
xTable,
|
||
xToolbar,
|
||
demo1,
|
||
printEvent1,
|
||
printSelectEvent1,
|
||
printEvent2,
|
||
printEvent3,
|
||
printEvent4,
|
||
printEvent5,
|
||
printEvent6,
|
||
demoCodes: [
|
||
`
|
||
<vxe-toolbar ref="xToolbar" print>
|
||
<template #buttons>
|
||
<vxe-button content="打印表格" @click="printEvent1"></vxe-button>
|
||
<vxe-button content="打印勾选行" @click="printSelectEvent1"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<vxe-table
|
||
border
|
||
ref="xTable"
|
||
height="300"
|
||
:print-config="{}"
|
||
:data="demo1.tableData">
|
||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||
<vxe-column type="seq" width="60"></vxe-column>
|
||
<vxe-column field="name" title="Name"></vxe-column>
|
||
<vxe-column field="role" title="Role"></vxe-column>
|
||
<vxe-column field="age" title="Age"></vxe-column>
|
||
<vxe-column field="address" title="Address"></vxe-column>
|
||
</vxe-table>
|
||
`,
|
||
`
|
||
import { defineComponent, reactive, ref, nextTick } from 'vue'
|
||
import { VXETable, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const xTable = ref({} as VxeTableInstance)
|
||
const xToolbar = ref({} as VxeToolbarInstance)
|
||
|
||
// 打印样式
|
||
const printStyle = \`
|
||
.title {
|
||
text-align: center;
|
||
}
|
||
.my-list-row {
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
.my-list-col {
|
||
float: left;
|
||
width: 33.33%;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
}
|
||
.my-top,
|
||
.my-bottom {
|
||
font-size: 12px;
|
||
}
|
||
.my-top {
|
||
margin-bottom: 5px;
|
||
}
|
||
.my-bottom {
|
||
margin-top: 30px;
|
||
text-align: right;
|
||
}
|
||
\`
|
||
|
||
// 打印顶部内容模板
|
||
const topHtml = \`
|
||
<h1 class="title">出货单据</h1>
|
||
<div class="my-top">
|
||
<div class="my-list-row">
|
||
<div class="my-list-col">商品名称：vxe-table</div>
|
||
<div class="my-list-col">发货单号：X2665847132654</div>
|
||
<div class="my-list-col">发货日期：2020-09-20</div>
|
||
</div>
|
||
<div class="my-list-row">
|
||
<div class="my-list-col">收货姓名：小徐</div>
|
||
<div class="my-list-col">收货地址：火星第七区18号001</div>
|
||
<div class="my-list-col">联系电话：10086</div>
|
||
</div>
|
||
</div>
|
||
\`
|
||
|
||
// 打印底部内容模板
|
||
const bottomHtml = \`
|
||
<div class="my-bottom">
|
||
<div class="my-list-row">
|
||
<div class="my-list-col"></div>
|
||
<div class="my-list-col">创建人：小徐</div>
|
||
<div class="my-list-col">创建日期：2020-09-20</div>
|
||
</div>
|
||
</div>
|
||
\`
|
||
|
||
const demo1 = reactive({
|
||
tableData: [
|
||
{ id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
|
||
{ id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Shanghai' },
|
||
{ id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Beijing' },
|
||
{ id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
|
||
{ id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shenzhen' },
|
||
{ id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
|
||
{ id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
|
||
{ id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
|
||
]
|
||
})
|
||
|
||
const printEvent1 = () => {
|
||
const $table = xTable.value
|
||
$table.print({
|
||
sheetName: '打印出货单据',
|
||
style: printStyle,
|
||
columns: [
|
||
{ type: 'seq' },
|
||
{ field: 'name' },
|
||
{ field: 'role' },
|
||
{ field: 'address' }
|
||
],
|
||
beforePrintMethod: ({ content }) => {
|
||
// 拦截打印之前，返回自定义的 html 内容
|
||
return topHtml + content + bottomHtml
|
||
}
|
||
})
|
||
}
|
||
|
||
const printSelectEvent1 = () => {
|
||
const $table = xTable.value
|
||
$table.print({
|
||
sheetName: '打印勾选行',
|
||
style: printStyle,
|
||
mode: 'selected',
|
||
columns: [
|
||
{ type: 'seq' },
|
||
{ field: 'name' },
|
||
{ field: 'role' },
|
||
{ field: 'address' }
|
||
],
|
||
beforePrintMethod: ({ content }) => {
|
||
// 拦截打印之前，返回自定义的 html 内容
|
||
return topHtml + content + bottomHtml
|
||
}
|
||
})
|
||
}
|
||
|
||
nextTick(() => {
|
||
// 将表格和工具栏进行关联
|
||
const $table = xTable.value
|
||
const $toolbar = xToolbar.value
|
||
$table.connect($toolbar)
|
||
})
|
||
|
||
return {
|
||
xTable,
|
||
xToolbar,
|
||
demo1,
|
||
printEvent1,
|
||
printSelectEvent1
|
||
}
|
||
}
|
||
})
|
||
`,
|
||
`
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印下面的区域" @click="printEvent5"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<div id="myPrint5">
|
||
<div>
|
||
<p>将当前渲染的<span style="color: #20f320">内容</span>打印出来，仅<span style="color: blue;font-size: 20px">打印</span>内联<span style="color: red">样式</span></p>
|
||
<p>内容<span style="font-size: 30px;font-weight: 700">区域</span></p>
|
||
</div>
|
||
</div>
|
||
`,
|
||
`
|
||
import { defineComponent } from 'vue'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const printEvent5 = () => {
|
||
const divEl = document.getElementById('myPrint5') as HTMLDivElement
|
||
VXETable.print({
|
||
sheetName: '打印下面区域',
|
||
content: divEl.innerHTML
|
||
})
|
||
}
|
||
return {
|
||
printEvent5
|
||
}
|
||
}
|
||
})
|
||
`,
|
||
`
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印条形码" @click="printEvent2"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
`,
|
||
`
|
||
import { defineComponent, reactive, ref } from 'vue'
|
||
import { VXETable } from 'vxe-table'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const codeList = [
|
||
{ name: '某年xx1', price: 340, code: '1201545742000' },
|
||
{ name: 'vue 开发指南', price: 99, code: '1271545042006' },
|
||
{ name: 'test abc', price: 288, code: '1001545847781' },
|
||
{ name: 'vue 进阶用法', price: 188, code: '1201511842009' },
|
||
{ name: '某某xx2', price: 860, code: '1201543242003' },
|
||
{ name: 'js 从入门到精通', price: 99, code: '1201775849605' },
|
||
{ name: 'vxe-table pro test abc', price: 888, code: '1201775112606' },
|
||
{ name: 'js 进阶宝典', price: 166, code: '1201775849608' }
|
||
]
|
||
|
||
const printEvent2 = () => {
|
||
// 打印样式
|
||
const printStyle = \`
|
||
.barcode {
|
||
display: inline-block;
|
||
width: 50%;
|
||
height: 240px;
|
||
float: left;
|
||
text-align: center;
|
||
}
|
||
\`
|
||
// 打印模板
|
||
const printTmpls: string[] = []
|
||
codeList.forEach(item => {
|
||
const img = document.createElement('img')
|
||
// 生成条形码
|
||
const tmpl = \`
|
||
<div class="barcode">
|
||
<p>\${item.name}</p>
|
||
\${img.outerHTML}
|
||
<p>统一售价：￥\${item.price}</p>
|
||
</div>
|
||
\`
|
||
printTmpls.push(tmpl)
|
||
})
|
||
VXETable.print({
|
||
sheetName: '打印条形码模板',
|
||
style: printStyle,
|
||
content: printTmpls.join('')
|
||
})
|
||
}
|
||
|
||
return {
|
||
printEvent2
|
||
}
|
||
}
|
||
})
|
||
`,
|
||
`
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印二维码" @click="printEvent3"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
`,
|
||
`
|
||
import { defineComponent, reactive, ref } from 'vue'
|
||
import { VXETable } from 'vxe-table'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const printEvent3 = () => {
|
||
// 打印样式
|
||
const printStyle = \`
|
||
.title,
|
||
.qrcode {
|
||
text-align: center;
|
||
}
|
||
\`
|
||
// 生成二维码
|
||
// 打印模板
|
||
const printTmpl = \`
|
||
<p class="title">扫一扫二维码</p>
|
||
<div class="qrcode">
|
||
<img src="">
|
||
<div style="margin-top: 15px;">如果对您有帮助，点击右上角支持我们吧！</div>
|
||
</div>
|
||
\`
|
||
VXETable.print({
|
||
sheetName: '打印二维码模板',
|
||
style: printStyle,
|
||
content: printTmpl
|
||
})
|
||
}
|
||
|
||
return {
|
||
printEvent3
|
||
}
|
||
}
|
||
})
|
||
`,
|
||
`
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印自定义模板" @click="printEvent4"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
`,
|
||
`
|
||
import { defineComponent, reactive, ref } from 'vue'
|
||
import { VXETable } from 'vxe-table'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const printEvent4 = () => {
|
||
// 打印样式
|
||
const printStyle = \`
|
||
.page-1 {
|
||
height: 1000px;
|
||
}
|
||
.page-2 {
|
||
padding: 15px 0;
|
||
}
|
||
.fill-row {
|
||
display: block;
|
||
font-size: 14px;
|
||
height: 36px;
|
||
}
|
||
.fill-span {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
height: 36px;
|
||
}
|
||
.fill-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.fill-empty,
|
||
.fill-part {
|
||
display: inline-block;
|
||
vertical-align: bottom;
|
||
border-bottom: 1px solid #000;
|
||
}
|
||
.number {
|
||
width: 250px;
|
||
margin-top: 40px;
|
||
}
|
||
.number .fill-empty {
|
||
width: 160px;
|
||
}
|
||
.title {
|
||
text-align: center;
|
||
margin: 80px 0;
|
||
}
|
||
.info-a,
|
||
.info-b {
|
||
margin: 0 auto;
|
||
width: 400px;
|
||
text-align: right;
|
||
}
|
||
.info-a .fill-row,
|
||
.info-b .fill-row {
|
||
height: 48px;
|
||
}
|
||
.info-a .fill-empty,
|
||
.info-b .fill-empty {
|
||
width: 200px;
|
||
}
|
||
.info-b {
|
||
margin-top: 80px;
|
||
}
|
||
.list-desc {
|
||
padding-left: 15px;
|
||
}
|
||
\`
|
||
// 打印模板
|
||
const printTmpl = \`
|
||
<div class="page-1">
|
||
<div class="fill-row number">
|
||
<span class="fill-title">编号：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<h1 class="title">劳动合同书</h1>
|
||
<div class="info-a">
|
||
<div class="fill-row">
|
||
<span class="fill-title">甲方（用人单位名称）名称：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">住址：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">法定代表人（委托代理人）：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
</div>
|
||
<div class="info-b">
|
||
<div class="fill-row">
|
||
<span class="fill-title">乙方（劳动者）姓名：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">性别：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">住址：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">居民身份证号：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
<div class="fill-row">
|
||
<span class="fill-title">联系电话：</span>
|
||
<span class="fill-empty"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-2">
|
||
<p> 甲乙双方根据《中国人民共和国劳动合同法》等法律、法规、规章的规定，在平等、自愿、协商一致的基础上，同意订立本劳动合同，共同遵守本合同所列条款。</p>
|
||
<h2>一：合同类型的期限</h2>
|
||
<div class="list-desc">
|
||
<p>第一条 甲、乙双方选择以下第<span class="fill-part" style="width: 100px"></span>等形式确定本合同期限：</p>
|
||
<div class="list-desc">
|
||
<p>1、固定期限：自<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日起至<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日止。</p>
|
||
<p>2、无固定期限：自<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日起至<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日止</p>
|
||
<p>3、以完成一定的工作（任务）为期限：自<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日起至工作（任务）完成时即行终止。</p>
|
||
<p>双方约定的试用期限<span class="fill-part" style="width: 60px"></span>年<span class="fill-part" style="width: 40px"></span>月<span class="fill-part" style="width: 40px"></span>日只，期限为<span class="fill-part" style="width: 40px"></span>月</p>
|
||
</div>
|
||
</div>
|
||
<h2>二：工作内容和工作地点</h2>
|
||
<div class="list-desc">...省略</div>
|
||
<h2>三：工作时间和休息休假</h2>
|
||
<div class="list-desc">...省略</div>
|
||
<div style="margin-top: 15px;">如果对您有帮助，点击右上角支持我们吧！</div>
|
||
</div>
|
||
\`
|
||
VXETable.print({
|
||
sheetName: '打印自定义模板',
|
||
style: printStyle,
|
||
content: printTmpl
|
||
})
|
||
}
|
||
|
||
return {
|
||
printEvent4
|
||
}
|
||
}
|
||
})
|
||
`,
|
||
`
|
||
<vxe-toolbar>
|
||
<template #buttons>
|
||
<vxe-button content="打印图片" @click="printEvent6"></vxe-button>
|
||
</template>
|
||
</vxe-toolbar>
|
||
|
||
<img id="myPrint6" src="/vxe-table/static/other/invoice.png" style="width: 300px">
|
||
`,
|
||
`
|
||
import { defineComponent } from 'vue'
|
||
|
||
export default defineComponent({
|
||
setup () {
|
||
const printEvent6 = () => {
|
||
const imgEl = document.getElementById('myPrint6') as HTMLImageElement
|
||
VXETable.print({
|
||
sheetName: '打印图片',
|
||
style: \`
|
||
img {
|
||
width: 100%;
|
||
}
|
||
\`,
|
||
content: \`<img src="\${imgEl.src}">\`
|
||
})
|
||
}
|
||
return {
|
||
printEvent6
|
||
}
|
||
}
|
||
})
|
||
`
|
||
]
|
||
}
|
||
}
|
||
})
|
||
</script>
|