1.window.print()
新建一个html直接复制粘贴，打开项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
color: #000;
font-family: "SimHei";
}
.prints {
background-color: yellow;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
.printss {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 10px solid #000;
margin-top: 30px;
}
</style>
</head>
<body>
<div onclick="printData()" class="prints">打印按钮</div>
<script>
// 打印的方法
function printData() {
var bdhtml = window.document.body.innerHTML; // 获取body里面原本所有的内容
var printHtmls = `<div class="printss">坏女人今天中午吃什么?<div>`; // 想要打印的内容，可以是组件、文字等
window.document.body.innerHTML = printHtmls; // 因为 window.print()默认打印的是body里面所有的内容，多以要讲想要打印的内容进行替换
window.print(); // 打印
window.document.body.innerHTML = bdhtml; // 讲替换后的打印的内容恢复到页面本来的内容
window.location.reload(); // 重新加载页面
}
</script>
</body>
</html>
2.使用Printjs 自定义页面
1.Printjs官网https://printjs.crabbly.com/
2.使用
1.下载到项目 npm install print-js --save
2.哪个模块使用就引入import print from “print-js”;
3.订单打印
<!-- 打印单 -->
<div class="print-div visible" id="print_area">
<div class="center bbt">xx商城</div>
<!-- <div class="center bbt">{{orderDetails.shopName}}</div> -->
<div class="print-1 bbt">
<div class="display">
<span>店员:{{ orderDetails.clerk }}</span>
<span>机号:{{ orderDetails.MachineNumber }}</span>
<span>收银员:{{ orderDetails.cashier }}</span>
</div>
<div class="display">
<span>出单时间:{{ orderDetails.userAddrOrder.createTime }}</span>
<span>单号：{{ orderDetails.orderNumber }}</span>
</div>
<div class="print-table">
<el-table class="el-table" :data="tableData" style="width: 100%">
<el-table-column
align="left"
prop="tardeName"
label="商品名称"
width="220"
>
</el-table-column>
<el-table-column
class="el-table-one"
width="100"
prop="amount"
label="数量"
>
</el-table-column>
<el-table-column prop="price" label="单价" width="100">
</el-table-column>
<el-table-column prop="money" label="金额"> </el-table-column>
</el-table>
</div>
</div>
<div class="print-2 bbt">
<div class="display">
<span>件数：{{ orderDetails.productNums }} </span>
<span>运费：{{ orderDetails.freightAmount }}元</span>
<span>优惠：{{ orderDetails.reduceAmount }}</span>
<span>总价：{{ orderDetails.actualTotal }}</span>
</div>
<div class="display">
<span>积分支付：{{ orderDetails.scoreReduce }} </span>
<span
>支付方式：{{
["积分支付", "微信支付", "支付宝"][orderDetails.payType]
}}</span
>
</div>
</div>
<div class="print-3">
<div class="display">
<span>收货人：{{ orderDetails.userAddrOrder.receiver }}</span>
<span>联系方式：{{ orderDetails.userAddrOrder.mobile }}</span>
</div>
<div class="display">
<span
>收货地址：{{ orderDetails.userAddrOrder.province
}}{{ orderDetails.userAddrOrder.city
}}{{ orderDetails.userAddrOrder.area
}}{{ orderDetails.userAddrOrder.addr }}</span
>
</div>
<div class="display">
<span>配送方式：{{ DvyType(orderDetails.dvyType) }}</span>
<span>订单类型：{{ OrderType(orderDetails.orderType) }} </span>
</div>
<!-- <div class="display">
<span>配送时间：{{ orderDetails.DeliveryTime }}</span>
</div> -->
<div class="display">
<span>门店热线：{{ orderDetails.shopName }}</span>
<span>门店地址：{{ orderDetails.shopAddress }} </span>
</div>
<div class="display">
<span>备注：{{ orderDetails.remarks }}</span>
</div>
<h1>谢谢惠顾，欢迎下次光临!</h1>
</div>
</div>
/**
* 打印订单
*
*/
Printorder(order, MachineType) {
this.$confirm(`确定打印订单[${order.orderNumber}]`, "提示", {
confirmButtonText: this.$i18n.t("shopFeature.edit.confirm"),
cancelButtonText: this.$i18n.t("shopFeature.edit.cancel"),
type: "warning",
})
.then(() => {
this.$http({
url: this.$http.adornUrl(
`/order/order/printInfo/${order.orderNumber}`
),
method: "get",
})
.then(({ data }) => {
const { order, shopDetail } = data;
console.log("✨🐱🏍🐱 ~ .then ~ data", data);
if (data) {
const oldValue = {
clerk: "123", //店员
MachineNumber: "0050", //机号
cashier: "jdsf001", //收银员
};
const { orderItems, userAddrOrder } = order;
//订单详情字段
this.orderDetails = { ...oldValue, ...order, ...shopDetail };
//处理订单商品
const newData = orderItems.map((item) => {
const newObj = {
tardeName: `${item.prodName}【${item.skuName}】`,
amount: item.prodCount,
price: item.price,
money: item.productTotalAmount,
};
return newObj;
});
this.tableData = newData;
const style =
"@page { } " +
"@media print { .print-table{padding-bottom: 15px;} .el-table .cell { text-align: left; line-height: 25px; } .el-table__body-wrapper .el-table__row td:nth-child(2) .cell{margin-left:20px} .print-div {padding: 0px;font-size:10px }.center { text-align: center; padding-bottom: 15px; font-size: 20px;font-weight: bold; } .bbt { margin: 10px 0px 10px; border-bottom: 2px solid #000; } .display { display: flex; justify-content: space-between; padding-bottom: 10px; }";
//处理打印改变
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
if (this.orderDetails) {
console.log(
"✨🐱🏍🐱 ~ .then ~ this.orderDetails",
this.orderDetails
);
setTimeout(() => {
print({
printable: "print_area",
type: "html",
style: style, // 亦可使用引入的外部css;
scanStyles: false,
});
loading.close();
}, 1000);
}
}
// this.$newMessage.success(this.$i18n.t('shopFeature.list.deleteSuccess'))
// this.getMiniPagesList()
})
.catch((error) => {
console.log("err", error);
});
// this.$notify({
// title: "成功",
// message: `打印成功[${order.orderNumber}]`,
// type: "success",
// });
})
.catch(() => {});
},
4168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
