update

package.json

@@ -23,6 +23,7 @@
     "lodash": "^4.17.15",
     "moment": "^2.26.0",
     "naf-core": "^0.1.2",
+    "print-template": "^1.2.2",
     "qrcode": "^1.4.4",
     "vue": "^2.6.10",
     "vue-meta": "^2.3.1",

src/views/student/certCard.vue

@@ -3,9 +3,10 @@
     <el-row>
       <el-col :span="24">
         <el-col :span="24">
-          <el-button type="primary" size="mini" @click="toPrint()">打印证书</el-button>
+          <el-button type="primary" size="mini" @click="toTest()">打印证书</el-button>
         </el-col>
-        <el-col :span="24" ref="print">
+        <test :list="list"></test>
+        <!-- <el-col :span="24" ref="print">
           <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
             <p>
               <span>学校（院）：</span>
@@ -28,23 +29,25 @@
               <span>2020年11月22日</span>
             </p>
           </el-col>
-        </el-col>
+        </el-col> -->
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import printTemplate from 'print-template';
+import test from '../train-plan/parts/test';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'certCard',
   props: {
     list: null,
   },
-  components: {},
+  components: { test },
   data: function() {
     return {
-      // zhengshu: require('@/assets/zhengshu.jpg'),
+      zhengshu: require('@/assets/zhengshu.jpg'),
     };
   },
   created() {},

src/views/train-plan/parts/print-sign.vue

@@ -9,7 +9,7 @@
       <el-col :span="24" style="width:1060px;border: solid #cecece;">
         <el-table border stripe :data="list" ref="print" size="small" style="border: solid #cecece;">
           <el-table-column align="center" label="姓名" prop="name" width="170"></el-table-column>
-          <el-table-column align="center" label="学校" prop="school_name" width="150" ></el-table-column>
+          <el-table-column align="center" label="学校" prop="school_name" width="150"></el-table-column>
           <el-table-column align="center" label="性别" prop="gender" width="80"></el-table-column>
           <el-table-column align="center" label="民族" prop="nation" width="150"></el-table-column>
           <el-table-column align="center" label="班级" prop="classname" width="80"></el-table-column>

src/views/train-plan/parts/test.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="test">
+    <el-row :gutter="12">
+      <el-col :offset="8" :span="8">
+        <el-card shadow="always">
+          <div slot="header" class="clearfix">
+            <span>简单实例</span>
+          </div>
+
+          <div>
+            <el-form label-width="80px">
+              <el-form-item label="名字">
+                <el-input v-model="from.name"></el-input>
+              </el-form-item>
+              <el-form-item label="条形码">
+                <el-input v-model="from.code"></el-input>
+              </el-form-item>
+              <el-form-item label="页数">
+                <el-input-number v-model="from.num" controls-position="right" :min="1" :max="10"> </el-input-number>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="print">生成打印文件</el-button>
+                <el-button v-if="url" type="success" @click="openPdf">
+                  打开生成文件
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import printTemplate from 'print-template';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'test',
+  props: {
+    list: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {
+      url: '',
+      template: null,
+      from: { num: 1, name: '张三', code: 'YT121212323' },
+      zhengshu: require('@/assets/zhengshu.jpg'),
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.template = new printTemplate();
+      this.template.push({
+        name: 'expressDelivery1',
+        unit: 'mm',
+        size: [210, 297],
+        fixed: [
+          { type: 'image', x: 0, y: 0, default: this.zhengshu, width: 210, height: 297 },
+          { type: 'text', x: 209, y: 205, fontSize: 3.5, default: '2020年11月参加吉林省大学生就业能力扩展训练' },
+        ],
+
+        data: {
+          school_name: { type: 'text', x: 15, y: 15, fontSize: 3.5 },
+          entry_year: { type: 'text', x: 56, y: 55, fontSize: 3.5 },
+          major: { type: 'text', x: 107, y: 105, fontSize: 3.5 },
+          name: { type: 'text', x: 158, y: 155, fontSize: 3.5 },
+          termname: { type: 'text', x: 15, y: 255, fontSize: 3.5 },
+          cernum: { type: 'text', x: 100, y: 250, fontSize: 3.5 },
+        },
+      });
+    },
+    openPdf() {
+      let link = document.createElement('a');
+      link.href = this.url;
+      link.target = '_blank';
+      link.click();
+    },
+    print() {
+      let data = [];
+      this.url = null;
+      // for (let index = 0; index < this.from.num; index++) {
+      //   data.push({ code: this.from.code + (index + 1), name: this.from.name + (index + 1) });
+      // }
+      let duplicate = _.cloneDeep(this.list);
+      duplicate = duplicate.map(i => {
+        i.cernum = `2020${i.termname}${i.classname}`;
+        return i;
+      });
+      this.template.print('expressDelivery1', [duplicate[0]]).then(pdf => {
+        if (pdf) {
+          this.$message.success('生成成功');
+          this.url = pdf.output('bloburi', { filename: '打印文件' });
+        } else {
+          this.$message.warring('生成失败');
+        }
+      });
+    },
+    image2Base64(img) {
+      var canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      var ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+      var dataURL = canvas.toDataURL('image/png');
+      return dataURL;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>