frame/parts/print/test.vue

<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 }],

        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;
      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('生成失败');
        }
      });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>