<template>
|
<div>
|
|
<el-button type="primary" @click="clickMe">点击我</el-button>
|
|
<el-dialog
|
title="预览"
|
:visible.sync="dialogVisible"
|
width="70%"
|
>
|
<!-- 要打印的区域 -->
|
<div id="printMe">
|
|
<div style="display: flex;justify-content: space-around">
|
<!-- 二维码部分-->
|
<div>
|
<div id="qrCode" ref="qrCodeDiv" />
|
<!-- <img :src="QRImgUrl">-->
|
|
<div style="font-size: 18px;width: 100px;text-align: center;margin-top: 10px">MO-79601</div>
|
</div>
|
<!-- 公司名称及打印单类型-->
|
<div
|
style="height: 100px;display: flex;justify-content:space-between;align-items: center;flex-direction: column;font-weight: bolder"
|
>
|
<div style="font-size: 26px;">永康新凯迪工业互联有限公司</div>
|
<div style="font-size: 22px;">委外派单</div>
|
</div>
|
<!--右侧水印及姓名日期-->
|
<div>
|
<div ref="watermark" style="width: 100px;height:100px;" />
|
<div style="font-weight: bolder">
|
<div>姓名：张三</div>
|
<div>日期：2022-07-05</div>
|
</div>
|
</div>
|
</div>
|
<el-divider />
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%"
|
>
|
<el-table-column
|
prop="date"
|
label="日期"
|
width="180"
|
/>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
width="180"
|
/>
|
<el-table-column
|
prop="address"
|
label="地址"
|
/>
|
</el-table>
|
</div>
|
|
<!-- <vue-easy-print ref="printRef" :button-show="true">-->
|
<!-- x-->
|
<!-- </vue-easy-print>-->
|
|
<!-- 打印的按钮，显示打印预览 -->
|
<!-- <el-button v-print="'#printMe'">打印</el-button>-->
|
<el-button v-print="printObj">打印</el-button>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import vueEasyPrint from 'vue-easy-print'
|
import QRCode from 'qrcodejs2'
|
// import QRCode from 'qrcode'
|
|
export default {
|
name: 'Gdpg',
|
components: {
|
vueEasyPrint
|
},
|
data() {
|
return {
|
firstWatermark: true, // 第一次显示水印
|
firstbindQRCode: true, // 第一次显示二维码
|
form: {
|
describle: ''
|
},
|
QRImgUrl: '',
|
QRlink: 'www.xxx.com',
|
dialogVisible: false,
|
printObj: {
|
id: 'printMe',
|
popTitle: '打印模板',
|
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
|
// id: 'printMe',
|
// popTitle: '打印', // 打印配置页上方标题
|
// extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
|
// preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
|
// previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
|
// previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
|
// zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
|
// previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
|
// previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
|
// beforeOpenCallback() {}, // 开启打印前的回调事件
|
// openCallback() {}, // 调用打印之后的回调事件
|
// closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
|
// url: '',
|
// standard: '',
|
// extraCss: ''
|
},
|
tableData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1517 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1519 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1516 弄'
|
}]
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
addWatermark() {
|
if (this.firstWatermark) {
|
console.log(this.firstWatermark)
|
this.$watermark.set('凯迪制造', this.$refs.watermark)
|
this.firstWatermark = false
|
}
|
},
|
clickMe() {
|
this.dialogVisible = true
|
this.$nextTick(() => {
|
this.bindQRCode()
|
this.addWatermark()
|
})
|
},
|
bindQRCode() {
|
if (this.firstbindQRCode) {
|
new QRCode(this.$refs.qrCodeDiv, {
|
// text: 'Vue实现生成二维码！',
|
text: 'Vue实现生成二维码！',
|
width: 100,
|
height: 100,
|
colorDark: '#333333', // 二维码颜色
|
colorLight: '#ffffff', // 二维码背景色
|
correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
|
})
|
this.firstbindQRCode = false
|
}
|
|
// const opts = {
|
// errorCorrectionLevel: 'L', // 容错级别
|
// type: 'image/png', // 生成的二维码类型
|
// quality: 0.3, // 二维码质量
|
// margin: 5, // 二维码留白边距
|
// width: 128, // 宽
|
// height: 128, // 高
|
// text: 'http://www.baidu.com', // 二维码内容
|
// color: {
|
// dark: '#666666', // 前景色
|
// light: '#fff'// 背景色
|
// }
|
// }
|
// // this.QRlink 生成的二维码地址url
|
// QRCode.toDataURL(this.QRlink, opts, (err, url) => {
|
// if (err) throw err
|
// // 将生成的二维码路径复制给data的QRImgUrl
|
// this.QRImgUrl = url
|
// })
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
