打印组件

package.json

@@ -33,6 +33,7 @@
     "svg-sprite-loader": "3.7.3",
     "vue": "2.5.16",
     "vue-cookie": "1.1.4",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "3.0.1",
     "vuedraggable": "^2.24.3",
     "vuex": "3.0.1"

src/main.js

@@ -14,10 +14,12 @@ import { isAuth } from '@/utils'
 import cloneDeep from 'lodash/cloneDeep'
 import SuperFlow from './views/modules/common/vue-super-flow/index'
 import html2pdf from '@/api/pdf'
+import Print from 'vue-print-nb'
 
 Vue.use(VueCookie)
 Vue.use(SuperFlow)
 Vue.use(html2pdf)
+Vue.use(Print)
 Vue.config.productionTip = false
 
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock

src/views/modules/check/ibc-export.vue

@@ -5,40 +5,40 @@
       width="70%"
       :close-on-click-modal="false"
       :visible.sync="visible">
-      <div class="my-table" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
+      <div class="my-table" id="printContent" style="padding-top: 55px;background-color:#fff;">
         <h1 style="text-align: center">入  厂  检  验  报  告</h1>
         <h4 style="text-align: right;margin-right: 100px;margin-top: 40px">编号： {{dataForm.inspectionCode}}</h4>
         <!-- border="1" -->
         <table class="table-first" align="center" cellpadding="8" cellspacing="0" border="1"
                style="margin-top: 10px;font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 1px 1px 0 0;">
           <tbody align="center">
-          <el-row>
+          <tr>
             <th style="width: 100px">供方单位</th>
             <td style="width: 250px" colspan="1" rowspan="1">{{dataForm.source}}</td>
             <th style="width: 100px">批次号</th>
             <td style="width: 400px" colspan="1" rowspan="1">{{dataForm.batchNumber}}</td>
-          </el-row>
-          <el-row>
+          </tr>
+          <tr>
             <th style="width: 100px">产品名称</th>
             <td style="width: 250px" colspan="1" rowspan="1">{{dataForm.materialName}}</td>
             <th style="width: 100px">产品图号</th>
             <td style="width: 400px" colspan="1" rowspan="1">{{dataForm.specifications}}</td>
-          </el-row>
-          <el-row>
+          </tr>
+          <tr>
             <th style="width: 100px">来料类型</th>
-            <td align="left" style="width: 750px">
+            <td colspan="3" align="left" style="width: 750px">
               <el-checkbox-group v-model="idsMaterial">
                 <!-- :style="item.id === 1?'margin-left: 30px':''" -->
                 <el-checkbox class="my-cb"  v-for="(item,i) in optionsMaterial" :label="item.code" :key="item.code"><span style="color: #404040">{{item.value}}</span></el-checkbox>
               </el-checkbox-group>
             </td>
-          </el-row>
-          <el-row>
+          </tr>
+          <tr>
             <th style="width: 100px">检验设备（勾选）</th>
-            <td align="left" style="width: 750px">
+            <td colspan="3" align="left" style="width: 750px">
               {{dataForm.detectionEquipment}}
             </td>
-          </el-row>
+          </tr>
           </tbody>
         </table>
         <table class="table-data-list" align="center" cellpadding="8" cellspacing="0" border="1"
@@ -69,24 +69,25 @@
         <table class="table-conclusion" align="center" cellpadding="8" cellspacing="0" border="1"
                style="font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 0 1px 1px 1px">
           <tbody align="left">
-          <el-row>
-            <th style="width: 850px; text-align: left">检验结论：</th>
-          </el-row>
-          <el-row style="height: 200px">
+          <tr>
+            <th colspan="4" style="width: 850px; text-align: left">检验结论：</th>
+          </tr>
+          <tr style="height: 200px">
             <td>{{dataForm.conclusion}}</td>
-          </el-row>
-          <el-row>
+          </tr>
+          <tr>
             <th style="width: 100px">检验员：</th>
             <td style="width: 400px">{{dataForm.creatorName}}</td>
             <th style="width: 80px">审核：</th>
             <td style="width: 250px">梁瑞伟</td>
-          </el-row>
+          </tr>
           </tbody>
         </table>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" v-on:click="getPdf()">导出</el-button>
+<!--        <el-button type="primary" v-on:click="getPdf()">导出</el-button>-->
+        <el-button type="primary" v-print="'#printContent'">导出</el-button>
       </span>
     </el-dialog>
   </div>

yarn.lock

@@ -579,13 +579,12 @@ aws4@^1.8.0:
   resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
 
-axios@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.nlark.com/axios/download/axios-0.17.1.tgz?cache=0&sync_timestamp=1618847188301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Faxios%2Fdownload%2Faxios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d"
-  integrity sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.npmmirror.com/axios/download/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha1-gE5voeS5xSiFAd2d/1anoJQNINY=
   dependencies:
-    follow-redirects "^1.2.5"
-    is-buffer "^1.1.5"
+    follow-redirects "^1.14.4"
 
 babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
@@ -4260,11 +4259,16 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.2.5:
+follow-redirects@^1.0.0:
   version "1.14.1"
   resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555300559&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
   integrity sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=
 
+follow-redirects@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.npmmirror.com/follow-redirects/download/follow-redirects-1.14.5.tgz?cache=0&sync_timestamp=1635857764332&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
+  integrity sha1-8JpYSJgdPHcrU5Iwl3hSP42Fw4E=
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.npm.taobao.org/for-in/download/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -7036,12 +7040,7 @@ lodash.without@~4.4.0:
   resolved "https://registry.npm.taobao.org/lodash.without/download/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-lodash@4.17.5:
-  version "4.17.5"
-  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.5.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
-  integrity sha1-maktZcAnLevoyWtgV7yPv6O+1RE=
-
-lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=
@@ -11667,6 +11666,13 @@ vue-loader@13.3.0:
     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-print-nb@^1.7.5:
+  version "1.7.5"
+  resolved "https://registry.nlark.com/vue-print-nb/download/vue-print-nb-1.7.5.tgz#0eaaf9317c233028458e8dbe8aa76603fef63b95"
+  integrity sha1-Dqr5MXwjMChFjo2+iqdmA/72O5U=
+  dependencies:
+    vue "^2.6.11"
+
 vue-router@3.0.1:
   version "3.0.1"
   resolved "https://registry.nlark.com/vue-router/download/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
@@ -11706,6 +11712,11 @@ vue@2.5.16:
   resolved "https://registry.nlark.com/vue/download/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
   integrity sha1-B+23XoQSqu7YceuvqZ9GclhKAIU=
 
+vue@^2.6.11:
+  version "2.6.14"
+  resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
+  integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
+
 vuedraggable@^2.24.3:
   version "2.24.3"
   resolved "https://registry.nlark.com/vuedraggable/download/vuedraggable-2.24.3.tgz?cache=0&sync_timestamp=1623379056800&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuedraggable%2Fdownload%2Fvuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"