【Vue】单据打印功能
一、打印组件
需要选定区域进行打印，使用vue-print组件
组件安装
npm install vue-print-nb --save
在项目的Main.js中引入（全局注册）：
import Print from 'vue-print-nb' Vue.use(Print)
组件使用
1、对要打印的区域套一个div，设置id属性
<div id="printView">
这是要打印的区域代码....
<div/>
2、放置打印触发按钮，该组件已经装填了自定义指令（v-print），传入字符填写id选择器
<div class="drawer-bottom-bar"> <el-button v-print="'#printView'" type="primary">打印</el-button> <el-button @click="$parent.$parent.closePrintDialog()">取消</el-button> </div>
二、打印预览
element-ui 表格组件在打印时会样式崩塌，这个问题没法解决，直接弃用组件
实际上的需求是打印单据，用最简单的table组件实现即可
字体的样式：
font-size: 12px; /* 字体大小 */ font-family: SimSun; /* 字体样式 */
表格的标签属性和样式：
属性
<table border="1pm" cellspacing="0" align="center" width="100%">
表格内容...
<table/>
样式
/* 表格边框线折叠 */ border-collapse: collapse; /* 单元格布局 */ table-layout:fixed; word-wrap:break-word; word-break:break-all;
三、完整代码：
<template>
<div v-loading="loading" style="padding: 10px;">
<div id="printView" style="padding-left: 90px; padding-right: 20px;">
<h2 style="text-align: center;margin: 30px 0 10px 0;font-family: SimSun;">用款申请单</h2>
<table class="table" border="0pm" cellspacing="0" align="left" width="100%" style="font-size: 12px;font-family: SimSun;margin-bottom: 10px; table-layout:fixed;word-wrap:break-word;word-break:break-all">
<tr>
<td style="padding:5px;" align="left"> </td>
<td style="padding:5px;" align="left"> </td>
<td style="padding:5px;" align="left"> </td>
<td style="padding:5px; font-weight: bolder; font-size: 15px;" align="right">{{ form.fullCoName }}</td>
</tr>
<tr>
<td style="padding:5px;" align="left"> </td>
<td style="padding:5px;" align="left"> </td>
<td style="padding:5px;" align="left"> </td>
<td style="padding:5px; font-weight: bolder; font-size: 15px;" align="right">单据编号：{{ form.apCode }}</td>
</tr>
<tr>
<td style="padding:5px;" align="left">申请部门：{{ form.deName }}</td>
<td style="padding:5px;" align="left">申请日期：{{ form.apDate }}</td>
<td style="padding:5px;" align="left">报销人：{{ form.apProposerName }}</td>
<td style="padding:5px;" align="left">制单人：{{ form.creatorName }}</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="padding:5px;" align="left">往来对象类型：{{ form.apRoTypeName }}</td>
<td style="padding:5px;" align="left">往来对象：{{ form.apReObjName }}</td>
<td style="padding:5px;" align="left">付款结算方式：{{ form.apSettMethName }}</td>
<td style="padding:5px;" align="left">合计金额：{{ form.apToAmount }}</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="padding:5px;" align="left">收款人：{{ form.apRePayee }}</td>
<td style="padding:5px;" align="left">收款账号：{{ form.apReAccount }}</td>
<td style="padding:5px;" align="left">收款银行：{{ form.apReBank }}</td>
<td style="padding:5px;" align="left">收款支行：{{ form.apReSubbranch }}</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="padding:5px;" align="left">开户行所在地：{{ form.apReBaLocus }}</td>
<td style="padding:5px;" align="left">付款备注：{{ form.apPaRemark }}</td>
<td />
<td />
</tr>
</table>
<div style="font-size: 12px;font-family: SimSun;font-weight: bold;margin: 0 0 10px 5px;">用款明细</div>
<table class="yk-table" border="1pm" cellspacing="0" align="center" width="100%" style="font-size: 12px;font-family: SimSun; table-layout:fixed;word-wrap:break-word;word-break:break-all">
<tr>
<th width="55px">序号</th>
<th>摘要</th>
<th>归属项目</th>
<th>金额（元）</th>
<th>费用类别</th>
</tr>
<tr v-for="(item, index) in form.detailList" :key="index" align="center">
<td>{{ index + 1 }}</td>
<td>{{ item.adSummary }}</td>
<td>{{ item.inName }}</td>
<td>{{ item.adAmount }}</td>
<td>{{ item.exName }}</td>
</tr>
<tr align="center">
<td>合计</td>
<td colspan="2">{{ adAmountUpper }}</td>
<td>{{ adAmount }}</td>
<td />
</tr>
</table>
</div>
<div class="drawer-bottom-bar">
<el-button v-print="'#printView'" type="primary">打印</el-button>
<el-button @click="$parent.$parent.closePrintDialog()">取消</el-button>
</div>
</div>
</template>
<script>
import { getFinSpApplyById } from '@/api/financial/spend/spapply'
import { amtLower2Upper } from '@/utils'
import { getCustomerList } from '@/api/system/archives/customer'
import { getEmployeeList } from '@/api/system/archives/employee'
export default {
name: 'SpApplyPrint',
props: {
keyId: {
type: [String, Number],
required: false,
default: null
},
approve: {
type: Object,
required: false,
default() {
return {
approveId: '',
approveType: 'SN070201',
approveResult: '',
actTaskId: ''
}
}
}
},
data() {
return {
loading: false,
toggleFlag: false,
loadingFlag: false,
formRef: 'formRefKey',
form: {
apCode: '',
coName: '',
deName: '',
apDate: '',
apReObj: '',
apReObjName: '',
apApprStateName: '',
apProposerName: '',
apRoTypeName: '',
apSettMethName: '',
apToAmount: '',
creatorName: '',
attachList: [],
detailList: []
},
commonStyle: { width: '100%' },
apRoNameList: [],
adAmount: 0,
adAmountUpper: ''
}
},
created() {
this.initialSpApplyDetail()
},
methods: {
async initialSpApplyDetail() {
const isFromApprove = !!this.approve.approveId
const { data: res } = await getFinSpApplyById(isFromApprove ? this.approve.approveId : this.keyId)
this.form = res
const isUnit = this.form.apRoType === 'B140001'
if (isUnit) {
const { data: res } = await getCustomerList({ sealupState: '0' })
this.apRoNameList = res.map((customer, idx) => Object.assign(customer, { commonName: customer.cuName }))
} else {
const { data: res } = await getEmployeeList({})
this.apRoNameList = res.map((employee, idx) => Object.assign(employee, { commonName: employee.emName }))
}
const obj = this.apRoNameList.find(obj => obj.id === this.form.apReObj)
this.$set(this.form, 'apReObjName', obj.commonName)
let sum = 0
this.form.detailList.forEach(x => { sum += x.adAmount })
this.adAmount = sum
this.adAmountUpper = amtLower2Upper(sum)
}
}
}
</script>
<style media="print">
@page {
size: auto;
margin: 3mm;
}
html {
background-color: #ffffff;
margin: 0px;
}
body {
border: solid 1px #ffffff;
}
</style>
<style lang="scss" scoped>
@media print {
#printView {
display: block;
width: 100%;
overflow: hidden;
}
}
</style>
