修改表格打印样式

package.json

@@ -43,6 +43,7 @@
     "vue-barcode": "^1.3.0",
     "vue-layer": "^1.2.0",
     "vue-pdf": "^4.1.0",
+    "vue-print-nb": "^1.7.5",
     "vue-qr": "^4.0.9",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",

src/main.js

@@ -7,8 +7,8 @@ import "normalize.css/normalize.css"; // a modern alternative to CSS resets
 import "./styles/element-variables.scss";
 import "@/styles/global.scss";
 import "@/styles/index.scss"; // global css
-// import Print from 'vue-print-nb'
-import Print from './assets/print'
+import Print from 'vue-print-nb'
+//import Print from './assets/print'
 import 'default-passive-events';
 Vue.use(Print);
 

src/views/components/printTable.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>
-    <div v-for="(im, inx) in taData" :key="inx">
-      <div style="width:100%;height:50px;text-align:center;line-height:50px;">
+  <div class="print-content">
+    <!-- <div v-for="(im, inx) in taData" :key="inx"> -->
+    <div class="table-container">
+      <div class="print-header">
         {{ userName }}
       </div>
       <table class="printTable" border="1" style="table-layout: auto">
         <thead>
+          <tr style="height:50px;border-right: none;">
+            <th></th>
+          </tr>
           <tr>
             <th
               v-for="(item, index) in tableHeader"
@@ -17,7 +21,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, index) in im" :key="index">
+          <tr v-for="(item, index) in taData" :key="index">
             <td v-for="(itm, idx) in tableHeader" :key="idx">
               <span v-if="itm.value == 'iFas'">
                 <span v-if="item.isFas == '0'">否</span>
@@ -29,20 +33,21 @@
           </tr>
           <tr>
             <td>合计</td>
-            <td colspan="5">{{ chaseData(im) }}</td>
-            <td>{{ amtNumber(im) }}</td>
+            <td colspan="5">{{ chaseData() }}</td>
+            <td>{{ amtNumber() }}</td>
             <td colspan="7"></td>
           </tr>
         </tbody>
       </table>
-      <div class="fot-val">
-        {{ tableLabel }}
-        <br />
-        <br />
-        &nbsp; &nbsp; &nbsp; &nbsp;{{ time }}
-      </div>
-      <div style="page-break-after: always"></div>
     </div>
+    <div class="fot-val">
+      {{ tableLabel }}
+      <br />
+      <br />
+      &nbsp; &nbsp; &nbsp; &nbsp;{{ time }}
+    </div>
+    <!-- <div style="page-break-after: always"></div> -->
+    <!-- </div> -->
   </div>
 </template>
 <script>
@@ -78,17 +83,17 @@ export default {
       }
       return newArr;
     },
-    amtNumber(item) {
+    amtNumber() {
       let nub = 0;
-      item.forEach(item => {
+      this.taData.forEach(item => {
         nub += Number(item.amt);
       });
       let pasNub = parseFloat(nub.toFixed(4));
       return pasNub + "元";
     },
-    chaseData(item) {
+    chaseData() {
       let nub = 0;
-      item.forEach(item => {
+      this.taData.forEach(item => {
         nub += Number(item.amt);
       });
       let pasNub = parseFloat(nub.toFixed(4));
@@ -103,10 +108,10 @@ export default {
       this.$route.query.branchName +
       "----" +
       this.$route.query.stmtPrd +
-      "结算单";
+      "---结算单";
     this.tableLabel = this.$store.state.user.username;
-    let newData = this.paginData(this.tableData, 15);
-    this.taData = newData;
+    // let newData = this.paginData(this.tableData, 5);
+    this.taData = this.tableData;
   }
 };
 </script>
@@ -122,6 +127,7 @@ export default {
       border: 1px solid black;
       text-align: center;
     }
+
     th {
       padding: 3px;
     }
@@ -134,12 +140,26 @@ export default {
     zoom: 75%;
   }
   @page {
-    size: auto; /* 重置页面大小，避免出现空白页 */
-    margin-top: 10mm; /* 取消页眉 */
-    margin-left: 6mm; /* 取消默认的左右页边距 */
-    margin-right: 45mm; /* 取消默认的左右页边距 */
+    size: auto;
+    /* 重置页面大小，避免出现空白页 */
+    margin-top: 10mm;
+    /* 取消页眉 */
+    margin-left: 6mm;
+    /* 取消默认的左右页边距 */
+    margin-right: 45mm;
+    /* 取消默认的左右页边距 */
+  }
+  table {
+    page-break-inside: auto;
+  }
+  tr {
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
   }
 }
+
 .fot-val {
   width: 100%;
   height: 100px;
@@ -148,4 +168,20 @@ export default {
   justify-content: flex-end;
   padding-right: 50px;
 }
+
+.print-header {
+  width: 100%;
+  height: 50px;
+  text-align: center;
+  line-height: 50px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #fff;
+}
+.table-container {
+  position: relative;
+}
+.print-header {
+}
 </style>

src/views/page/procurement-settlement/reconciliation/supplierDetail.vue

@@ -121,7 +121,7 @@
           append-to-body
         >
           <div class="prWrap">
-            <div id="printMe">
+            <div id="printMe" class="print-container">
               <printTable :tableHeader="tableHeader" :tableData="list" />
             </div>
           </div>
@@ -154,6 +154,14 @@ import {
   exportAllSetlExcel
 } from "@/api/procurement-settlement/index";
 import { exportData } from "../../consumCataManage-sup/const.js";
+const printCSS = `
+    @media print{.print-header{position: fixed !important;top: 0 !important;left:10px; !important;height: 51px !important;background: #fff !important;margin-left:1px;}
+   table{page-break-inside: auto;}
+   tr{page-break-inside: avoid;}
+   thead{display: table-header-group;}
+   @page{@bottom-right{content: "第" counter(page) "页/共" counter(pages) "页";font-family: Arial;font-size: 10pt;}}
+   body{counter-reset: page;}
+`;
 export default {
   components: {
     ylStep,
@@ -249,19 +257,22 @@ export default {
       printObj: {
         id: "printMe",
         popTitle: "", // 打印配置页上方标题
-        extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
+        extraHead: `<style>${printCSS}</style>`, //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
         preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
         previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
         previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
         zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
-        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
+        previewBeforeOpenCallback() {
+          console.log("执行了吗");
+        }, //预览窗口打开之前的callback（开启预览模式调用）
         previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
         beforeOpenCallback: () => {}, // 开启打印前的回调事件
+        beforePrintCallback: () => {},
         openCallback() {}, // 调用打印之后的回调事件
         closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
         url: "",
         standard: "",
-        extraCss: ""
+        extraCss: printCSS
       }
     };
   },
@@ -308,10 +319,6 @@ export default {
     comhandleClose() {
       this.comModal = false;
     },
-    //设置表格第一行的颜色
-    // getRowClass({ row, column, rowIndex, columnIndex }) {
-    //     return "background:#e2e1e1;text-align:center";
-    // },
     arraySpanMethod() {
       //table合计行合并单元格
       setTimeout(() => {
@@ -408,16 +415,19 @@ export default {
 #printMe {
   ::v-deep .print-table {
     border: 1px solid #999;
+
     td,
     th {
       border-right: 1px solid #999;
       border-bottom: 1px solid #999;
     }
   }
+
   ::v-deep .price-css {
     margin-left: 94%;
   }
 }
+
 .el-card {
   ::v-deep .el-card__body {
     padding: 10px 0px 10px 0px;
@@ -425,6 +435,7 @@ export default {
     margin-right: 20px;
   }
 }
+
 .right-btn {
   width: 100%;
   height: 50px;
@@ -436,6 +447,7 @@ export default {
   align-items: center;
   justify-content: flex-end;
 }
+
 .prWrap {
   height: 400px;
   overflow: auto;