项目管理生成二维码添加打印功能

src/main.js

@@ -37,7 +37,7 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
-
+import Print from 'vue-print-nb'
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -61,6 +61,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(Print);
 DictData.install()
 
 /**

src/views/abuwx/wxuser/project.vue

@@ -76,14 +76,17 @@
         </el-dialog>
         <!-- 二维码 -->
         <el-dialog :visible.sync="codeOpen" width="250px" append-to-body>
+          <div id="printdata">
             <div>项目名称：<span>{{ this.titles }}</span></div>
             <div>
               <vue-qr ref="qrCode" :text="texturl" :logoSrc="logoSrc" :color-dark="randomColor"></vue-qr>
             </div>
+          </div>
+
             <div slot="footer">
-                <el-button type="primary" @click="() => {
+                <el-button type="primary" @click="() => { codeOpen = false }">确定</el-button>
-            codeOpen = false
+              <el-button type="text" @click="handlePrint" v-print="'#printdata'" >下载二维码</el-button>
-        }">确定</el-button>
+
             </div>
         </el-dialog>
     </div>
@@ -91,6 +94,7 @@
 
 <script>
 import { listProject, getProject, delProject, addProject, updateProject } from "@/api/abuwx/project";
+
 import upload from '@/components/FileUpload/index.vue'
 import VueQr from 'vue-qr'
 // import { Base64 } from "js-base64";
@@ -103,6 +107,35 @@ export default {
     },
     data() {
         return {
+          printContent: {
+            id: "printdata", // 打印的区域
+            preview: false, // 预览工具是否启用
+            previewTitle: "", // 预览页面的标题
+            popTitle: "", // 打印页面的页眉
+            // extraCss: "", //css 尽量不要在此设置样式
+            previewBeforeOpenCallback(vue) {
+              console.log("正在加载预览窗口");
+            },
+            previewOpenCallback(vue) {
+              console.log("已经加载完预览窗口");
+            },
+            clickMounted: (vue) => {
+              console.log("触发点击打印回调");
+
+              vue.isShowPrint = true; //弹框显示条码
+            },
+            beforeOpenCallback(vue) {
+              console.log("打开之前", vue.barcodeNum);
+            },
+            openCallback(vue) {
+              console.log(vue);
+              vue.isShowPrint = false; // 关闭条码显示弹框
+              console.log("执行了打印", vue.barcodeNum);
+            },
+          },
+          fontSizeText: "16px",
+          lineHeightText: "16px",
+
             downLoadUrl :process.env.VUE_APP_BASE_API,
             // 遮罩层
             loading: true,
@@ -251,7 +284,28 @@ export default {
             this.download('abuwx/project/export', {
                 ...this.queryParams
             }, `project_${new Date().getTime()}.xlsx`)
-        }
+        },
+      handlePrint(qrCode,name) {
+        // refName ref名称   name下载文件名称
+          const iconUrl = this.$refs[qrCode].$el.src //currentSrc
+        console.log(this.$refs[qrCode],'=====================')
+          const a = document.createElement('a')
+          const event = new MouseEvent('click')
+          a.download = name
+          a.href = iconUrl
+          a.dispatchEvent(event)
+
+      },
     }
 };
 </script>
+<style scoped lang="scss">
+#printdata {
+  text-align: center;
+  font-weight: 700;
+  font-size: 20px;
+  .text {
+    margin-bottom: 20px;
+  }
+}
+</style>