|
Uxiao7 于 2021-08-20 16:50:00 發(fā)布 331 收藏 分類專欄： vue js js實(shí)現(xiàn)打印 文章標(biāo)簽： js html vue javascript window 版權(quán) vue 同時(shí)被 3 個(gè)專欄收錄 1 篇文章0 訂閱 訂閱專欄 js 15 篇文章0 訂閱 訂閱專欄 js實(shí)現(xiàn)打印 1 篇文章0 訂閱 訂閱專欄 1.window.print() 新建一個(gè)html直接復(fù)制粘貼，打開項(xiàng)目 <!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; // 因?yàn)?window.print()默認(rèn)打印的是body里面所有的內(nèi)容，多以要講想要打印的內(nèi)容進(jìn)行替換 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./ 2.使用 1.下載到項(xiàng)目 npm install print-js --save 2.哪個(gè)模塊使用就引入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>機(jī)號(hào):{{ orderDetails.MachineNumber }}</span> <span>收銀員:{{ orderDetails.cashier }}</span> </div> <div class="display"> <span>出單時(shí)間:{{ orderDetails.userAddrOrder.createTime }}</span> <span>單號(hào)：{{ 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="單價(jià)" 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>運(yùn)費(fèi)：{{ orderDetails.freightAmount }}元</span> <span>優(yōu)惠：{{ orderDetails.reduceAmount }}</span> <span>總價(jià)：{{ 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>配送時(shí)間：{{ 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", //機(jī)號(hào) 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)載請(qǐng)附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/Uxiao7/article/details/119827024 |
|
|
