打印

package-lock.json

@@ -2771,8 +2771,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -4817,8 +4816,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -7351,6 +7349,12 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true
+    },
     "launch-editor": {
       "version": "2.6.0",
       "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.6.0.tgz",
@@ -7424,9 +7428,8 @@
     },
     "less-loader": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
       "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
-      "dev": true,
       "requires": {
         "clone": "^2.1.1",
         "loader-utils": "^1.1.0",
@@ -7435,24 +7438,21 @@
       "dependencies": {
         "clone": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
-          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-          "dev": true
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
         },
         "json5": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
           "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
         },
         "loader-utils": {
           "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
           "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -7854,8 +7854,7 @@
     "minimist": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/minimist/-/minimist-1.2.7.tgz",
-      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
-      "dev": true
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
     },
     "minipass": {
       "version": "3.3.6",
@@ -8747,8 +8746,7 @@
     "pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -10034,6 +10032,16 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass-loader": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.2.0.tgz",
+      "integrity": "sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
@@ -12045,6 +12053,14 @@
         }
       }
     },
+    "vue-print-nb": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/vue-print-nb/-/vue-print-nb-1.7.5.tgz",
+      "integrity": "sha512-iNbNyUVRWz0Ha1UTiCKxMPtHLUDGgNI8e8xmD3xqm9RlXIUeX9bT7DgNAfY8vPzqyFRHqGjxLI1rycKH366ziQ==",
+      "requires": {
+        "vue": "^2.6.11"
+      }
+    },
     "vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",

package.json

@@ -13,12 +13,14 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.15.12",
     "jsonwebtoken": "^9.0.0",
+    "less-loader": "^5.0.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "naf-core": "^0.1.2",
     "qrcodejs2": "0.0.2",
     "vue": "^2.6.11",
     "vue-meta": "^2.4.0",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
@@ -34,8 +36,8 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.0.4",
-    "less-loader": "^5.0.0",
     "prettier": "^2.2.1",
+    "sass-loader": "^13.2.0",
     "vue-loader": "^17.0.1",
     "vue-template-compiler": "^2.6.11"
   },

src/main.js

@@ -12,6 +12,8 @@ import '@/plugins/meta';
 import '@/plugins/var';
 import '@/plugins/methods';
 import 'animate.css';
+import Print from 'vue-print-nb';
+Vue.use(Print); //注册
 Vue.config.productionTip = false;
 new Vue({ router, store, render: (h) => h(App) }).$mount('#app');
 window.vm = new Vue({ router });

src/views/order/add.vue

@@ -4,8 +4,9 @@
       <el-col :span="24" class="main animate__animated animate__backInRight">
         <el-col :span="24" class="one">
           <c-search :is_title="true" :is_back="true" @toBack="toBack"></c-search>
+          <el-button type="primary" size="mini" v-print="print">打印</el-button>
         </el-col>
-        <el-col :span="12" class="two">
+        <el-col :span="12" class="two" id="printArea">
           <el-col :span="24" class="two_1"><i class="el-icon-s-shop"></i>{{ shopInfo.name }}</el-col>
           <el-col :span="24" class="two_2">
             <el-col :span="24" class="left">桌号：{{ form.table_num }}</el-col>
@@ -56,6 +57,12 @@ export default {
       is_useList: is_use,
       // 订单类型
       typeList: order_type,
+      print: {
+        id: 'printArea', //打印的区域的id名
+        popTitle: '斗牛士烤肉', // 打印配置页上方标题
+        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        extraCss: '',
+      },
     };
   },
   created() {
@@ -108,7 +115,17 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style media="print" lang="less" scoped>
+@page {
+  size: auto;
+ 
+}
+@media print {
+  html {
+    zoom: 76%; //设置打印页面的缩放，大小
+     margin: 0 auto;
+  }
+}
 .main {
   display: flex;
   flex-direction: column;
@@ -179,4 +196,3 @@ export default {
     }
   }
 }
-</style>