第二种打印方式

package.json

@@ -14,13 +14,13 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
-    "crypto-js": "4.1.1",
-    "compression-webpack-plugin": "^1.1.12",
-    "dsbridge": "^3.1.4",
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "bpmn-js": "^6.1.1",
     "bpmn-js-properties-panel": "^0.33.1",
+    "compression-webpack-plugin": "^1.1.12",
+    "crypto-js": "4.1.1",
+    "dsbridge": "^3.1.4",
     "echarts": "^5.3.2",
     "element-resize-detector": "^1.2.4",
     "element-ui": "2.13.0",
@@ -42,6 +42,7 @@
     "vue": "^2.7.14",
     "vue-cropper": "^0.5.4",
     "vue-pdf": "^4.1.0",
+    "vue-print-nb": "^1.7.5",
     "vue-router": "3.0.6",
     "vuedraggable": "^2.23.2",
     "vuex": "3.1.0"

src/main.js

 import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import moment from 'moment'
+// 引用打印组件
+import Print from 'vue-print-nb'
 // import ElementUI from 'element-ui'
 // import './styles/element-variables.scss'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n
@@ -94,6 +96,9 @@ Vue.component('Pagination', Pagination)
 
 Vue.use(permission)
 
+// 使用打印组件
+Vue.use(Print);
+
 new Vue({
   el: '#app',
   router,

src/views/template/templateFirst.vue

 <template>
-  <div class="CheckBobyList">
+  <div class="CheckBobyList" id="nbprint">
     <!--    检查表主体-->
     <div class="checkList">
       <!--  检查表第一部分    -->
@@ -59,6 +59,7 @@
             <div class="right">
               <el-form-item>
                 <el-button class="scanCodeTop" type="primary" @click="scanCodes">扫码</el-button>
+                <el-button class="printCodeTop" type="primary" v-print="printOption">打印</el-button>
               </el-form-item>
               <el-form-item label="rank:" prop="jcRank">
                 <el-input
@@ -2314,6 +2315,10 @@ export default {
   components: { TextToolTip },
   data() {
     return {
+      printOption: {
+        id: 'nbprint', // 打印元素的id 不需要携带#号
+        popTitle: '检查表'
+      },
       submitLoadIng: false,
       presentLoading: false,
       approveLoading: false,
@@ -2687,21 +2692,6 @@ export default {
     this.handleCyPn()
   },
   methods: {
-    // 测试json
-    handleChagnge() {
-      const obj = {
-        jcLot: 1,
-        jcPn: 2,
-        jcRank: 3,
-        jcNum: 4
-      }
-      console.log('文本', JSON.stringify(obj))
-      const test = '{"jcLot":1,"jcPn":2,"jcRank":3,"jcNum":4}'
-      console.log('对象', JSON.parse(test))
-      // 测试空文本
-      const text2 = '{}'
-      console.log('测试空文本', JSON.parse(text2).jcLot)
-    },
     handelTab(i, e) {
       const that = this
       if (!that.$refs['input' + i]) {
@@ -4186,6 +4176,11 @@ export default {
             background: #0057ff;
             border-radius: 4px;
           }
+          .printCodeTop{
+            width: 20%;
+            border-radius: 4px;
+            float: inline-end;
+          }
 
           ::v-deep .el-form-item__label {
             width: 100px;