前端二维码导出问题修改
This commit is contained in:
parent
3e2a6171a6
commit
6c4b5da2b8
|
|
@ -740,6 +740,7 @@
|
|||
<!-- <img src="" alt="">-->
|
||||
</div>
|
||||
<div class="shboxCodeTemp">手环箱编号：{{ rowObj.shboxCode }}</div>
|
||||
<div class="deviceName">手环箱名称：{{ rowObj.shboxName }}</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer" style="text-align: center">
|
||||
<el-button type="primary" @click="downloadCode"
|
||||
|
|
|
|||
|
|
@ -364,7 +364,9 @@
|
|||
<div id="qrcode" class="qrcode" ref="codeItem"></div>
|
||||
<!-- <img src="" alt="">-->
|
||||
</div>
|
||||
|
||||
<div class="deviceCode">设备编号：{{ rowObj.deviceCode }}</div>
|
||||
<div class="deviceName">设备名称：{{ rowObj.deviceName }}</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer" style="text-align: center">
|
||||
<el-button type="primary" @click="downloadCode"
|
||||
|
|
|
|||
|
|
@ -62,76 +62,80 @@ export default {
|
|||
async handleQrCodeExport() {
|
||||
this.codeId = true;
|
||||
console.log('checkboxModel', this.checkboxModel)
|
||||
const msg = this.$modal.loading('批量生成中，请稍候...')
|
||||
let that = this
|
||||
try {
|
||||
|
||||
let captureId = document.getElementsByClassName('captureId')
|
||||
for (let i = 0; i < this.checkboxModel.length; i++) {
|
||||
const element = this.checkboxModel[i]
|
||||
captureId[i].innerHTML = ''
|
||||
let shareContent = that.$refs['QrcodePage'][i],
|
||||
width = shareContent.offsetWidth,
|
||||
height = shareContent.offsetHeight
|
||||
const maCodeText = document.createElement('div')
|
||||
maCodeText.innerHTML = '编码:' + element
|
||||
maCodeText.style =
|
||||
'font-size=18px; width:100%;text-align:center;margin:10px;'
|
||||
shareContent.appendChild(maCodeText)
|
||||
console.log(element)
|
||||
new QRCode(captureId[i], {
|
||||
width: width,
|
||||
height: height,
|
||||
text: element+'',
|
||||
colorDark: '#000',
|
||||
colorLight: '#fff',
|
||||
})
|
||||
let canvas = document.createElement('canvas'),
|
||||
scale = 1.2
|
||||
canvas.width = width * scale
|
||||
canvas.height = height * scale
|
||||
canvas.style.width =
|
||||
(shareContent.clientWidth * scale) / 100 + 'rem'
|
||||
canvas.style.height =
|
||||
(shareContent.clientHeight * scale) / 100 + 'rem'
|
||||
canvas.getContext('2d').scale(scale, scale)
|
||||
let opts = {
|
||||
scale: scale,
|
||||
canvas: canvas,
|
||||
logging: false,
|
||||
width: width,
|
||||
height: height,
|
||||
useCORS: true,
|
||||
if(this.checkboxModel.length>0){
|
||||
const msg = this.$modal.loading('批量生成中，请稍候...')
|
||||
let that = this
|
||||
try {
|
||||
let captureId = document.getElementsByClassName('captureId')
|
||||
for (let i = 0; i < this.checkboxModel.length; i++) {
|
||||
const element = this.checkboxModel[i]
|
||||
captureId[i].innerHTML = ''
|
||||
let shareContent = that.$refs['QrcodePage'][i],
|
||||
width = shareContent.offsetWidth,
|
||||
height = shareContent.offsetHeight
|
||||
const maCodeText = document.createElement('div')
|
||||
maCodeText.innerHTML = '编码:' + element
|
||||
maCodeText.style =
|
||||
'font-size=18px; width:100%;text-align:center;margin:10px;'
|
||||
shareContent.appendChild(maCodeText)
|
||||
console.log(element)
|
||||
new QRCode(captureId[i], {
|
||||
width: width,
|
||||
height: height,
|
||||
text: element+'',
|
||||
colorDark: '#000',
|
||||
colorLight: '#fff',
|
||||
})
|
||||
let canvas = document.createElement('canvas'),
|
||||
scale = 0.9
|
||||
canvas.width = width * scale
|
||||
canvas.height = height * scale
|
||||
canvas.style.width =
|
||||
(shareContent.clientWidth * scale) / 100 + 'px'
|
||||
canvas.style.height =
|
||||
(shareContent.clientHeight * scale) / 100 + 'px'
|
||||
canvas.getContext('2d').scale(scale, scale)
|
||||
let opts = {
|
||||
scale: scale,
|
||||
canvas: canvas,
|
||||
logging: false,
|
||||
width: width,
|
||||
height: height,
|
||||
useCORS: true,
|
||||
}
|
||||
await html2canvas(shareContent, opts)
|
||||
.then(function (canvas) {
|
||||
const qrContentImage = canvas.toDataURL(
|
||||
'image/jpeg',
|
||||
1.0,
|
||||
)
|
||||
if (i <= that.checkboxModel.length - 1) {
|
||||
that.qrcodeArr.push({
|
||||
url: qrContentImage,
|
||||
name: element,
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(function (reason) {
|
||||
console.log(reason)
|
||||
this.$emit('clearCheck')
|
||||
that.$modal.closeLoading()
|
||||
})
|
||||
}
|
||||
await html2canvas(shareContent, opts)
|
||||
.then(function (canvas) {
|
||||
const qrContentImage = canvas.toDataURL(
|
||||
'image/jpeg',
|
||||
1.0,
|
||||
)
|
||||
if (i <= that.checkboxModel.length - 1) {
|
||||
that.qrcodeArr.push({
|
||||
url: qrContentImage,
|
||||
name: element,
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(function (reason) {
|
||||
console.log(reason)
|
||||
this.$emit('clearCheck')
|
||||
that.$modal.closeLoading()
|
||||
})
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000))
|
||||
that.packageImages()
|
||||
setTimeout(msg, 1000)
|
||||
that.$modal.closeLoading()
|
||||
} catch (error) {
|
||||
setTimeout(msg, 1000)
|
||||
// that.getList()
|
||||
this.$emit('clearCheck')
|
||||
that.$modal.closeLoading()
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
that.packageImages()
|
||||
setTimeout(msg, 1000)
|
||||
that.$modal.closeLoading()
|
||||
} catch (error) {
|
||||
setTimeout(msg, 1000)
|
||||
// that.getList()
|
||||
this.$emit('clearCheck')
|
||||
that.$modal.closeLoading()
|
||||
}else{
|
||||
this.$modal.msgError("请先选择导出设备");
|
||||
}
|
||||
|
||||
},
|
||||
//打包压缩
|
||||
packageImages() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue