5 changed files with 398 additions and 2 deletions
@ -0,0 +1,370 @@ |
|||||
|
<template> |
||||
|
<div id="container"> |
||||
|
<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="formData.name"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="条形码"> |
||||
|
<el-input v-model="formData.code"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="页数"> |
||||
|
<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">生成打印文件</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: 'SupplierBankInfoIndex', |
||||
|
data() { |
||||
|
return { |
||||
|
template: null, |
||||
|
formData: { |
||||
|
number: 1, |
||||
|
name: '泡菜肉丝', |
||||
|
code: 'PCRS11886622' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.initPrintTemplate() |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
initPrintTemplate() { |
||||
|
this.template = new PrintTemplate() |
||||
|
this.template.push({ |
||||
|
name: 'printTemplate', |
||||
|
size: [210, 297], // a4 或 [221,291] |
||||
|
fixed: [ |
||||
|
|
||||
|
{ |
||||
|
type: 'text', |
||||
|
fontWeight: 400, |
||||
|
x: 88, |
||||
|
y: 3, |
||||
|
default: '汇融惠享礼包卡', |
||||
|
fontSize: '5', // 字体大小 |
||||
|
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑' |
||||
|
fontWeight: null, // 字体宽度 |
||||
|
fontStyle: 'normal', // 字体样式 normal / 斜体 |
||||
|
maxWidth: null, // 最大换行宽度 |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
color: 'red' // 字体颜色 (1.2.8版本新增) |
||||
|
}, |
||||
|
// 1号 |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 10, |
||||
|
y: 12, |
||||
|
length: 90, |
||||
|
color: 'blue', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 10, |
||||
|
y: 12, |
||||
|
length: 40, |
||||
|
color: 'red', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'p', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 10, |
||||
|
y: 52, |
||||
|
length: 90, |
||||
|
color: 'blue', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 100, |
||||
|
y: 12, |
||||
|
length: 40, |
||||
|
color: 'red', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'p', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 10, |
||||
|
y: 20, |
||||
|
length: 90, |
||||
|
color: 'blue', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 32, |
||||
|
y: 20, |
||||
|
length: 14, |
||||
|
color: 'blue', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'p', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 10, |
||||
|
y: 34, |
||||
|
length: 90, |
||||
|
color: 'blue', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
type: 'text', // 类型 文本 line / text / image / barcode / qrcode |
||||
|
// default: '家庭菜窖-白菜券', // 默认值 \n 换行 或设置maxWidth大小 |
||||
|
x: 30, // x |
||||
|
y: 14, // y |
||||
|
fontSize: '5', // 字体大小 |
||||
|
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑' |
||||
|
fontWeight: null, // 字体宽度 |
||||
|
fontStyle: 'normal', // 字体样式 normal / 斜体 |
||||
|
maxWidth: null, // 最大换行宽度 |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
color: 'red' // 字体颜色 (1.2.8版本新增) |
||||
|
}, |
||||
|
{ |
||||
|
type: 'text', // 类型 文本 line / text / image / barcode / qrcode |
||||
|
default: '手机提货:\n扫描下方\n 二维码', // 默认值 \n 换行 或设置maxWidth大小 |
||||
|
x: 14, // x |
||||
|
y: 23, // y |
||||
|
fontSize: '3', // 字体大小 |
||||
|
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑' |
||||
|
fontWeight: null, // 字体宽度 |
||||
|
fontStyle: 'normal', // 字体样式 normal / 斜体 |
||||
|
maxWidth: null, // 最大换行宽度 |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
color: 'red' // 字体颜色 (1.2.8版本新增) |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
type: 'text', // 类型 文本 line / text / image / barcode / qrcode |
||||
|
default: '提货券使用说明:\n· 本券概不挂失,不兑换现金\n· 本券提货编码和提货密码为兑换的唯一凭证\n· 手机扫描二维码可查询券卡状态', // 默认值 \n 换行 或设置maxWidth大小 |
||||
|
x: 35, // x |
||||
|
y: 21, // y |
||||
|
fontSize: '3', // 字体大小 |
||||
|
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑' |
||||
|
fontWeight: null, // 字体宽度 |
||||
|
fontStyle: 'normal', // 字体样式 normal / 斜体 |
||||
|
maxWidth: null, // 最大换行宽度 |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
color: 'red' // 字体颜色 (1.2.8版本新增) |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
type: 'text', // 类型 文本 line / text / image / barcode / qrcode |
||||
|
default: '提货编码', // 默认值 \n 换行 或设置maxWidth大小 |
||||
|
x: 12, // x |
||||
|
y: 37, // y |
||||
|
fontSize: '3', // 字体大小 |
||||
|
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑' |
||||
|
fontWeight: null, // 字体宽度 |
||||
|
fontStyle: 'normal', // 字体样式 normal / 斜体 |
||||
|
maxWidth: null, // 最大换行宽度 |
||||
|
orientation: 'p', // 方向 默认 l 横向 / p 竖向 |
||||
|
color: 'red' // 字体颜色 (1.2.8版本新增) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 2号 |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 110, |
||||
|
y: 12, |
||||
|
length: 90, |
||||
|
color: 'green', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 110, |
||||
|
y: 12, |
||||
|
length: 40, |
||||
|
color: 'orange', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'p', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 110, |
||||
|
y: 52, |
||||
|
length: 90, |
||||
|
color: 'green', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'l', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
{ |
||||
|
type: 'line', |
||||
|
x: 200, |
||||
|
y: 12, |
||||
|
length: 40, |
||||
|
color: 'orange', // 线段颜色 (1.2.8版本新增) |
||||
|
orientation: 'p', // 方向 默认 l 横向 / p 竖向 |
||||
|
}, |
||||
|
// { |
||||
|
// type: 'line', |
||||
|
// x: 2, |
||||
|
// y: 12, |
||||
|
// orientation: 'p', // l 横向 / p 竖向 |
||||
|
// length: 110 |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'line', |
||||
|
// x: 74, |
||||
|
// y: 12, |
||||
|
// orientation: 'p', |
||||
|
// length: 110 |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'text', |
||||
|
// x: 10, |
||||
|
// y: 30, |
||||
|
// fontSize: 3, |
||||
|
// default: '菜名' |
||||
|
// }, |
||||
|
// { |
||||
|
// 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: '二维码' |
||||
|
// }, |
||||
|
// { |
||||
|
// 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: '标题' |
||||
|
// }, |
||||
|
// { |
||||
|
// type: 'qrcode', |
||||
|
// x: 30, |
||||
|
// y: 38, |
||||
|
// width: 18, |
||||
|
// default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089' |
||||
|
// } |
||||
|
|
||||
|
], |
||||
|
|
||||
|
data: { |
||||
|
name: { |
||||
|
type: 'text', |
||||
|
x: 30, // x |
||||
|
y: 14, // y |
||||
|
fontSize: '5', // 字体大小 |
||||
|
}, |
||||
|
name2: { |
||||
|
type: 'text', |
||||
|
x: 17, // x |
||||
|
y: 48, // y |
||||
|
fontSize: '3', // 字体大小 |
||||
|
}, |
||||
|
code: { |
||||
|
x: 16, |
||||
|
y: 35, |
||||
|
type: 'qrcode', |
||||
|
default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089', |
||||
|
width: 13 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
print() { |
||||
|
let printData = [] |
||||
|
let printUrl = null |
||||
|
for (let index = 0; index < this.formData.number; index++) { |
||||
|
printData.push({ |
||||
|
code: " ", |
||||
|
name: "家庭菜窖-白菜券", |
||||
|
name2: "222222" |
||||
|
}) |
||||
|
} |
||||
|
this.template.print('printTemplate', printData).then(printPdf => { |
||||
|
if (printPdf) { |
||||
|
this.$message.success('生成成功') |
||||
|
printUrl = printPdf.output('bloburi', { |
||||
|
filename: '打印文件' |
||||
|
}) |
||||
|
window.open(printUrl, '_blank') |
||||
|
} else { |
||||
|
this.$message.warring('生成失败') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
#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> |
||||
Loading…
Reference in new issue