设置页脚

src/views/bookShelf/components/PrintModel.vue

@@ -7,6 +7,9 @@
         </div>
         <div class="print-model-bottom">
             <div class="print-model-bottom-left" id="showWaterMark" ref="printArea">
+                <footer class="print-footer">
+                    页脚页脚页脚
+                </footer>
                 <div class="print-inner">
                     <template v-if="resArr[0]&&resArr[0].wordsList">
                         <h2>
@@ -98,6 +101,8 @@ export default {
                 this.$print(this.$refs["printArea"], {
                 noPrint: ".noPrint",
                 type: "html",
+                scanStyles: true,
+                showModal: true,
                 // style: style,// 亦可使用引入的外部css;
                 onStart: () => {
                     console.log("打印开始");
@@ -208,4 +213,38 @@ export default {
     position: relative;
     z-index: 9999;
 }
+@media print {
+    .no-print {
+        display: none;
+    }
+    body {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    .printheader {
+        font-size: 50px;
+        color: green;
+        font-weight: bold;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 10000;
+    }
+    .printFotter{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        z-index: 100000;
+    }
+    .print-footer{
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+    }
+    @page {
+        margin: 30px 30px 40px 30px;
+    }
+}
 </style>