vue3实现打印table订单表格
废话少说，直接上代码！
/utils/commonFunction.ts 把数字转换成繁体中文封装函数
export default function () {
// 把数字转换成繁体中文
function convertCurrency(money: any) {
//汉字的数字
var cnNums = new Array(
"零",
"壹",
"贰",
"叁",
"肆",
"伍",
"陆",
"柒",
"捌",
"玖"
);
//基本单位
var cnIntRadice = new Array("", "拾", "佰", "仟");
//对应整数部分扩展单位
var cnIntUnits = new Array("", "万", "亿", "兆");
//对应小数部分单位
var cnDecUnits = new Array("角", "分", "毫", "厘");
//整数金额时后面跟的字符
var cnInteger = "整";
//整型完以后的单位
var cnIntLast = "元";
//最大处理的数字
var maxNum = 999999999999999.9999;
//金额整数部分
var integerNum;
//金额小数部分
var decimalNum;
//输出的中文金额字符串
var chineseStr = "";
//分离金额后用的数组，预定义
var parts;
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
//超出最大处理数字
return "";
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast + cnInteger;
return chineseStr;
}
//转换为字符串
money = money.toString();
if (money.indexOf(".") == -1) {
integerNum = money;
decimalNum = "";
} else {
parts = money.split(".");
integerNum = parts[0];
decimalNum = parts[1].substr(0, 4);
}
//获取整型部分转换
if (parseInt(integerNum, 10) > 0) {
var zeroCount = 0;
var IntLen = integerNum.length;
for (var i = 0; i < IntLen; i++) {
var n = integerNum.substr(i, 1);
var p = IntLen - i - 1;
var q = p / 4;
var m = p % 4;
if (n == "0") {
zeroCount++;
} else {
if (zeroCount > 0) {
chineseStr += cnNums[0];
}
//归零
zeroCount = 0;
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if (m == 0 && zeroCount < 4) {
chineseStr += cnIntUnits[q];
}
}
chineseStr += cnIntLast;
}
//小数部分
if (decimalNum != "") {
var decLen = decimalNum.length;
for (var i = 0; i < decLen; i++) {
var n = decimalNum.substr(i, 1);
if (n != "0") {
chineseStr += cnNums[Number(n)] + cnDecUnits[i];
}
}
}
if (chineseStr == "") {
chineseStr += cnNums[0] + cnIntLast + cnInteger;
} else if (decimalNum == "") {
chineseStr += cnInteger;
}
return chineseStr;
}
return {
convertCurrency,
};
}
页面代码
npm i print-js
<template >
<div class="layout-padding" style="overflow: auto;">
<div class="orderDetail">
<div class="print-container">
<div class="print-wrapper" ref="printRef" style="width:800px;">
<div class="print-title"
style="text-align: center;font-size: 30px;font-weight: bold;margin-bottom: 20px;">物联网数据服务采购订单</div>
<div class="print-orderNo" style="text-align: right;margin-bottom: 10px;margin-right: 20px;">
订单编号：{{ orderDetail.order_no }}
</div>
<div class="print-table-wrapper">
<table border="0" cellspacing="0" cellpadding="0" width="800">
<thead>
<tr>
<td colspan="3" :style="Table1TheadTdStyle" style="font-size: 20px;">
采购方
</td>
<td colspan="3" :style="Table1TheadTdStyle" style="font-size: 20px;">
供货方
</td>
</tr>
</thead>
<tbody>
<tr>
<td :style="Table1TbodyTdStyle" style="width: 100px;">单位名称</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ customerInfo.company }}</td>
<td :style="Table1TbodyTdStyle" style="width: 100px;">单位名称</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ ownerInfo.company }}</td>
</tr>
<tr>
<td :style="Table1TbodyTdStyle" style="width: 100px;">地址</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ customerInfo.address }}</td>
<td :style="Table1TbodyTdStyle" style="width: 100px;">地址</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ ownerInfo.address }}</td>
</tr>
<tr>
<td :style="Table1TbodyTdStyle" style="width: 100px;">联系人</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ customerInfo.contacts }}</td>
<td :style="Table1TbodyTdStyle" style="width: 100px;">联系人</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ ownerInfo.contacts }}</td>
</tr>
<tr>
<td :style="Table1TbodyTdStyle" style="width: 100px;">电话</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ customerInfo.mobile }}</td>
<td :style="Table1TbodyTdStyle" style="width: 100px;">电话</td>
<td :style="Table1TbodyTdStyle" colspan="2">{{ ownerInfo.mobile }}</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="800">
<thead>
<tr>
<th :style="TableTheadThStyle" colspan="7">采购产品信息栏</th>
</tr>
</thead>
<tbody>
<tr>
<td :style="TbodyTdLabelStyle">协议类型</td>
<td :style="TbodyTdLabelStyle">项目名称</td>
<td :style="TbodyTdLabelStyle">设备类型</td>
<td :style="TbodyTdLabelStyle">数额</td>
<td :style="TbodyTdLabelStyle">金额</td>
<td :style="TbodyTdLabelStyle">是否含卡</td>
<td :style="TbodyTdLabelStyle">续费年限</td>
</tr>
<tr v-for="item in tableData" :key="item.id">
<td :style="TbodyTdValueStyle">{{ item.protocol_describe }}</td>
<td :style="TbodyTdValueStyle">{{ item.project_name }}</td>
<td :style="TbodyTdValueStyle">{{ item.devicetype_name }}</td>
<td :style="TbodyTdValueStyle">{{ item.device_num }}</td>
<td :style="TbodyTdValueStyle">{{ item.amount }}</td>
<td :style="TbodyTdValueStyle">{{ item.is_card ? '是' : '否' }}</td>
<td :style="TbodyTdValueStyle">{{ orderDetail.yearnum }}</td>
</tr>
<tr>
<td colspan="7" :style="TbodyTdLabelStyle">
<span>合计金额（大写人民币）：{{
convertCurrency(orderDetail.pay_amount)
}}
</span>
<span style="margin-left:200px;">
小写：￥{{ Number(orderDetail.pay_amount) || 0 }} 元
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="800">
<thead>
<tr>
<th colspan="9" :style="TableTheadThStyle">交付信息栏</th>
</tr>
</thead>
<tbody>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 80px;">付款条件</td>
<td colspan="2" :style="TbodyTdValueStyle">
<span style="margin-right: 10px;">
<el-checkbox size="small" :checked="true" /> 先款后货
</span>
<span style="margin-right: 10px;">
<el-checkbox size="small" /> 货到付款
</span>
<span>
月结<input type="text" min="0"
style="border: none; outline: none; border-bottom: 1px solid black;text-indent: 5px;width: 25px;background-color: #fff;">
天
</span>
</td>
<td :style="TbodyTdLabelStyle" style="width: 80px;">订单日期</td>
<td colspan="2" :style="TbodyTdValueStyle">
{{ orderDetail.create_time }}
</td>
<td :style="TbodyTdLabelStyle" style="width: 80px;">交货日期</td>
<td colspan="2" :style="TbodyTdValueStyle">
{{ orderDetail.y_month }}
</td>
</tr>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 80px;">是否到款</td>
<td colspan="2" :style="TbodyTdValueStyle">
<span style="margin-right: 10px;">
<el-checkbox size="small" /> 是
</span>
<span>
<el-checkbox size="small" :checked="true" /> 否
</span>
</td>
<td :style="TbodyTdLabelStyle" style="width: 80px;">发票</td>
<td colspan="6" :style="TbodyTdValueStyle">
<span style="margin-right: 10px;">
<el-checkbox size="small" /> 否
</span>
<span style="margin-right: 10px;">
<el-checkbox size="small" /> 增值税普通发票
</span>
<span>
<el-checkbox size="small" /> 1%增值税专用发票
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="800">
<thead>
<tr>
<th colspan="3" :style="TableTheadThStyle">供货方财务信息栏</th>
</tr>
</thead>
<tbody>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 150px;">公司名称</td>
<td colspan="2" :style="TbodyTdValueStyle">{{ ownerInfo.company }}</td>
</tr>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 150px;">对公账户</td>
<td colspan="2" :style="TbodyTdValueStyle">{{ ownerInfo.bank_account }}</td>
</tr>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 150px;">开户行</td>
<td colspan="2" :style="TbodyTdValueStyle">{{ ownerInfo.bank_branch }}</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="800">
<thead>
<tr>
<th colspan="6" :style="TableTheadThStyle">签字盖章栏</th>
</tr>
</thead>
<tbody>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 150px;">采购方经办人（签名）</td>
<td colspan="2" :style="TbodyTdValueStyle"></td>
<td :style="TbodyTdLabelStyle" style="width: 150px;">供货方经办人（签名）</td>
<td colspan="2" :style="TbodyTdValueStyle"></td>
</tr>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 150px;">签章</td>
<td colspan="2" :style="TbodyTdValueStyle"></td>
<td :style="TbodyTdLabelStyle" style="width: 150px;">签章</td>
<td colspan="2" :style="TbodyTdValueStyle"></td>
</tr>
<tr>
<td :style="TbodyTdLabelStyle" style="width: 150px;">日期</td>
<td colspan="2" :style="TbodyTdValueStyle"></td>
<td :style="TbodyTdLabelStyle" style="width: 150px;">日期</td>
<td colspan="2" :style="TbodyTdValueStyle"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="btn-print">
<button type="button" id="print" class="CustomPrint" @click="onPrintJs">打印</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { reactive, onMounted, getCurrentInstance, toRefs, defineComponent, nextTick, computed } from 'vue';
import commonFunction from '/@/utils/commonFunction';
import printJs from 'print-js';
export default {
name: "orderManageOrderListOrderDetail",
setup() {
onMounted(async () => {
init()
});
const { convertCurrency } = commonFunction();
const { proxy }: any = getCurrentInstance();
const init = async () => {
let res = await proxy.apis.ordersDetail({ orderid: data.orderid });
if (res.code === 200) {
data.tableData = res.data.detaillist
data.orderDetail = res.data.order;
data.customerInfo = res.data.customer;
data.ownerInfo = res.data.owner;
} else {
proxy.$message.error(res.message);
}
}
const data = reactive({
orderid: proxy.$route.query.orderid,
orderDetail: {} as any,
tableData: [] as any[],
customerInfo: {} as any,
ownerInfo: {} as any,
})
// 打印点击
const onPrintJs = () => {
printJs({
printable: proxy.$refs.printRef,
type: 'html',
css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
scanStyles: false,
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
});
};
const Table1TheadTdStyle = computed(() => {
return { height: '45px', fontWeight: '700', fontSize: '20px', border: '1pt solid #333', textAlign: 'center', backgroundColor: '#b7dfe8' }
})
const Table1TbodyTdStyle = computed(() => {
return { height: '40px', fontWeight: '700', fontSize: '14px', border: '1pt solid #333', paddingLeft: '5px', }
})
const TableTheadThStyle = computed(() => {
return { height: '45px', fontWeight: '700', fontSize: '16px', border: '1pt solid #333', textAlign: 'center', backgroundColor: '#b7dfe8' }
})
const TbodyTdLabelStyle = computed(() => {
return { height: '40px', fontWeight: '700', fontSize: '14px', border: '1pt solid #333', textAlign: 'center', }
})
const TbodyTdValueStyle = computed(() => {
return { height: '40px', fontSize: '14px', border: '1pt solid #333', textAlign: 'center', }
})
return { ...toRefs(data), convertCurrency, onPrintJs, Table1TheadTdStyle, Table1TbodyTdStyle, TableTheadThStyle, TbodyTdLabelStyle, TbodyTdValueStyle }
}
}
</script>
<style lang="scss" scoped>
.orderDetail {
.print-container {
position: relative;
display: flex;
justify-content: center;
padding: 30px;
margin: 0 auto;
margin-top: 20px;
width: 850px;
background-color: #fff;
&:hover {
box-shadow: 2px 0px 3px 3px #ddd;
}
.btn-print {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
.CustomPrint {
cursor: pointer;
background-color: rgba(29, 205, 188, 0.4);
width: 95px;
height: 68px;
padding: 0;
border-radius: 5px;
border: 0;
color: #FFF;
background-image: url("/@/assets/print.png");
background-size: 40px 30px;
background-position: 27px 10px;
background-repeat: no-repeat;
padding-top: 34px;
&:hover {
background-color: #1e5761;
}
}
}
}
}
</style>页面效果图
打印弹窗效果图
