Uxiao7
于 2021-08-20 16:50:00 發(fā)布
331
收藏
分類專欄： vue js js實現(xiàn)打印 文章標簽： js html vue javascript window
版權(quán)
vue
同時被 3 個專欄收錄
1 篇文章0 訂閱
訂閱專欄
js
15 篇文章0 訂閱
訂閱專欄
js實現(xiàn)打印
1 篇文章0 訂閱
訂閱專欄
1.window.print()
新建一個html直接復(fù)制粘貼，打開項目
<!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里面原本所有的內(nèi)容
var printHtmls = `<div class="printss">壞女人今天中午吃什么?<div>`; // 想要打印的內(nèi)容，可以是組件、文字等
window.document.body.innerHTML = printHtmls; // 因為 window.print()默認打印的是body里面所有的內(nèi)容，多以要講想要打印的內(nèi)容進行替換
window.print(); // 打印
window.document.body.innerHTML = bdhtml; // 講替換后的打印的內(nèi)容恢復(fù)到頁面本來的內(nèi)容
window.location.reload(); // 重新加載頁面
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2.使用Printjs 自定義頁面
1.Printjs官網(wǎng)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="數(shù)量"
>
</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>件數(shù)：{{ orderDetails.productNums }} </span>
<span>運費：{{ orderDetails.freightAmount }}元</span>
<span>優(yōu)惠：{{ 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>聯(lián)系方式：{{ 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(() => {});
},
————————————————
版權(quán)聲明：本文為CSDN博主「Uxiao7」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Uxiao7/article/details/119827024
