<> install print-template rely on
npm install print-template
<>vue code
<template> <div id="container"> <el-row :gutter="12"> <el-col :offset="8" :span
="8"> <el-card shadow="always"> <div slot="header" class="clearfix"> <span> Simple example
</span> </div> <div> <el-form label-width="80px"> <el-form-item label=" Dish name "> <
el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label
=" bar code "> <el-input v-model="formData.code"></el-input> </el-form-item> <
el-form-item label=" the number of pages "> <el-input-number v-model="formData.number"
controls-position="right" :min="1" :max="10"> </el-input-number> </el-form-item>
<el-form-item> <el-button type="primary" @click="print"> Generate print file </el-button> </
el-form-item> </el-form> </div> </el-card> </el-col> </el-row> </div> </template
> <script> import PrintTemplate from 'print-template' export default { name:
'App', data () { return { template: null, formData: { number: 3, name: ' shredded pork with pickled vegetable ',
code: 'PCRS11886622' } } }, initPrintTemplate () { this.template = new
PrintTemplate() this.template.push( { name: 'printTemplate', size: [76, 130],
fixed: [ { type: 'line', x: 2, y: 12, length: 72 }, { type: 'line', x: 2, y: 12,
orientation: 'p', length: 110 }, { type: 'line', x: 74, y: 12, orientation: 'p'
, length: 110 }, { type: 'text', x: 10, y: 30, fontSize: 3, default: ' Dish name ' }, {
type: 'line', x: 25, y: 27, orientation: 'p', length: 8 }, { type: 'line', x: 2,
y: 35, length: 72 }, { type: 'line', x: 2, y: 27, length: 72 }, { type: 'text',
x: 10, y: 50, fontSize: 3, default: ' QR code ' }, { type: 'line', x: 25, y: 35,
orientation: 'p', length: 30 }, { type: 'line', x: 2, y: 65, length: 72 }, {
type: 'line', x: 2, y: 122, length: 72 }, { type: 'text', fontSize: 3.8,
fontWeight: 700, x: 33, y: 5, default: ' title ' }, { type: 'qrcode', x: 30, y: 38,
width: 25, default: ' The bean rind rinsed tripe at the foot of Wutai Mountain in Yangling, Shaanxi is also delicious ' } ], data: { name: { type: 'text', x:
35, y: 30, fontSize: 2.8 }, code: { type: 'barcode', x: 7, y: 13, format:
'CODE128A', width: 4, margin: 0, fontSize: 3.3, fontOptions: 'bold',
displayValue: true, height: 13 } } } ) }, created () { this.initPrintTemplate()
}, methods: { print () { let printData = [] let printUrl = null for (let index =
0; index < this.formData.number; index++) { printData.push({ code: this.formData
.code + (index + 1), name: this.formData.name + (index + 1) }) } this.template.
print('printTemplate', printData).then(printPdf => { if (printPdf) { this.
$message.success(' Generated successfully ') printUrl = printPdf.output('bloburi', { filename:
' print document ' }) window.open(printUrl, '_blank') } else { this.$message.warring(' Build failed ')
} }) } } } </script> <style> #container { font-family: 'Avenir', Helvetica,
Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:
grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<> Implementation effect

Click generate to print the page and the generated page will pop up automatically pdf file

<> The hard part

The marking is complicated , You need to calculate the coordinate lines to align them

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree