|
|
@@ -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>
|
