打印功能 vue-print-nb

src/dashoo.cn/frontend_web/nuxt.config.ignore.js

@@ -96,7 +96,8 @@ module.exports = {
     '@/plugins/element-ui',
     // '@/plugins/axios-defaults',
     {src: '@/plugins/clipboard', ssr: false},
-    {src: '@/plugins/error-handler', ssr: false}
+    {src: '@/plugins/error-handler', ssr: false},
+    {src: '@/plugins/vue-print-nb', ssr: false}
   ],
 
   modules: [

src/dashoo.cn/frontend_web/nuxt.config.js

@@ -123,6 +123,10 @@ module.exports = {
     {
       src: '@/plugins/error-handler',
       ssr: false
+    },
+    {
+      src: '@/plugins/vue-print-nb',
+      ssr: false
     }
   ],
 

src/dashoo.cn/frontend_web/package.json

@@ -36,6 +36,7 @@
     "vue-class-component": "^5.0.1",
     "vue-clipboards": "^1.1.0",
     "vue-i18n": "^7.2.0",
+    "vue-print-nb": "^1.0.3",
     "vuedraggable": "^2.15.0",
     "vuex-class": "^0.2.0",
     "wangeditor": ">=3.0.0",

src/dashoo.cn/frontend_web/src/pages/oilsupplier/paymentinfo/_opera/operation.vue

@@ -10,7 +10,7 @@
           <i class="icon icon-table2"></i> 缴费信息
         </span>
         <span style="float: right;">
-          <!--<el-button type="primary" size="mini" style="margin-right: 15px" @click="printBtn" v-if="formData.IsPay == '1'">打印</el-button>-->
+          <el-button type="primary" size="mini" style="margin-right: 15px" @click="printBtn" v-if="formData.IsPay == '1'">打印</el-button>
           <el-button type="primary" size="mini" style="margin-right: 15px" @click="submitPay" v-if="formData.IsPay == '1'">提交缴费</el-button>
           <router-link :to="'/oilsupplier/paymentinfo'">
             <el-button type="primary" size="mini">返回</el-button>
@@ -106,12 +106,13 @@
         <!--</div>-->
       <!--</el-card>-->
     <!--</el-dialog>-->
+
     <el-dialog
       title="打印内容"
       :visible.sync="dialogVisible"
       width="50%"
       center>
-      <div id="printid">
+      <div id="printBill">
         <el-row>
           <el-col :span="24">
             <div style="font-size: 18px;height: 30px">单位名称：{{this.formDataSup.SupplierName}}</div>
@@ -129,7 +130,7 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="printinfo">打 印</el-button>
+        <el-button type="primary" v-print="'#printBill'">打 印</el-button>
       </span>
     </el-dialog>
 
@@ -203,11 +204,17 @@
         })
         this.dialogVisible = true
       },
-      printinfo () {
-        let bdhtml = window.document.body.innerHTML
-        window.document.body.innerHTML = window.document.getElementById('printid').innerHTML
+      /*printinfo () {
+        let newstr = document.getElementById('printid').innerHTML
+        window.document.body.innerHTML = newstr
+        //let oldstr = window.document.body.innerHTML
         window.print()
-        window.document.body.innerHTML = bdhtml
+        window.location.reload()
+        //window.document.body.innerHTML = oldstr;
+        return false
+      },*/
+      printDemo(){
+        this.$refs.easyPrint.print()
       },
       initDatas () {
         if (this.formData.Id) {

src/dashoo.cn/frontend_web/src/plugins/vue-print-nb.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Print from 'vue-print-nb'
+
+Vue.use(Print)