haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端二维码导出问题修改

This commit is contained in:
zzyuan 2024-08-30 15:10:36 +08:00
parent 3e2a6171a6
commit 6c4b5da2b8
3 changed files with 74 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/base/bracelet/index.vue
View File

@ -740,6 +740,7 @@
<!-- <img src="" alt="">--> <!-- <img src="" alt="">-->
</div> </div>
<div class="shboxCodeTemp">手环箱编号：{{ rowObj.shboxCode }}</div> <div class="shboxCodeTemp">手环箱编号：{{ rowObj.shboxCode }}</div>
<div class="deviceName">手环箱名称：{{ rowObj.shboxName }}</div>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="downloadCode" <el-button type="primary" @click="downloadCode"

2
src/views/base/device/index.vue
View File

@ -364,7 +364,9 @@
<div id="qrcode" class="qrcode" ref="codeItem"></div> <div id="qrcode" class="qrcode" ref="codeItem"></div>
<!-- <img src="" alt="">--> <!-- <img src="" alt="">-->
</div> </div>
<div class="deviceCode">设备编号：{{ rowObj.deviceCode }}</div> <div class="deviceCode">设备编号：{{ rowObj.deviceCode }}</div>
<div class="deviceName">设备名称：{{ rowObj.deviceName }}</div>
</div> </div>
<div slot="footer" class="dialog-footer" style="text-align: center"> <div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="downloadCode" <el-button type="primary" @click="downloadCode"

138
src/views/components/qrCodeUpload.vue
View File

@ -62,76 +62,80 @@ export default {
async handleQrCodeExport() { async handleQrCodeExport() {
this.codeId = true; this.codeId = true;
console.log('checkboxModel', this.checkboxModel) console.log('checkboxModel', this.checkboxModel)
const msg = this.$modal.loading('批量生成中，请稍候...') if(this.checkboxModel.length>0){
let that = this const msg = this.$modal.loading('批量生成中，请稍候...')
try { let that = this
try {
let captureId = document.getElementsByClassName('captureId') let captureId = document.getElementsByClassName('captureId')
for (let i = 0; i < this.checkboxModel.length; i++) { for (let i = 0; i < this.checkboxModel.length; i++) {
const element = this.checkboxModel[i] const element = this.checkboxModel[i]
captureId[i].innerHTML = '' captureId[i].innerHTML = ''
let shareContent = that.$refs['QrcodePage'][i], let shareContent = that.$refs['QrcodePage'][i],
width = shareContent.offsetWidth, width = shareContent.offsetWidth,
height = shareContent.offsetHeight height = shareContent.offsetHeight
const maCodeText = document.createElement('div') const maCodeText = document.createElement('div')
maCodeText.innerHTML = '编码:' + element maCodeText.innerHTML = '编码:' + element
maCodeText.style = maCodeText.style =
'font-size=18px; width:100%;text-align:center;margin:10px;' 'font-size=18px; width:100%;text-align:center;margin:10px;'
shareContent.appendChild(maCodeText) shareContent.appendChild(maCodeText)
console.log(element) console.log(element)
new QRCode(captureId[i], { new QRCode(captureId[i], {
width: width, width: width,
height: height, height: height,
text: element+'', text: element+'',
colorDark: '#000', colorDark: '#000',
colorLight: '#fff', colorLight: '#fff',
}) })
let canvas = document.createElement('canvas'), let canvas = document.createElement('canvas'),
scale = 1.2 scale = 0.9
canvas.width = width * scale canvas.width = width * scale
canvas.height = height * scale canvas.height = height * scale
canvas.style.width = canvas.style.width =
(shareContent.clientWidth * scale) / 100 + 'rem' (shareContent.clientWidth * scale) / 100 + 'px'
canvas.style.height = canvas.style.height =
(shareContent.clientHeight * scale) / 100 + 'rem' (shareContent.clientHeight * scale) / 100 + 'px'
canvas.getContext('2d').scale(scale, scale) canvas.getContext('2d').scale(scale, scale)
let opts = { let opts = {
scale: scale, scale: scale,
canvas: canvas, canvas: canvas,
logging: false, logging: false,
width: width, width: width,
height: height, height: height,
useCORS: true, 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) await new Promise((resolve) => setTimeout(resolve, 2000))
.then(function (canvas) { that.packageImages()
const qrContentImage = canvas.toDataURL( setTimeout(msg, 1000)
'image/jpeg', that.$modal.closeLoading()
1.0, } catch (error) {
) setTimeout(msg, 1000)
if (i <= that.checkboxModel.length - 1) { // that.getList()
that.qrcodeArr.push({ this.$emit('clearCheck')
url: qrContentImage, that.$modal.closeLoading()
name: element,
})
}
})
.catch(function (reason) {
console.log(reason)
this.$emit('clearCheck')
that.$modal.closeLoading()
})
} }
await new Promise((resolve) => setTimeout(resolve, 1000)) }else{
that.packageImages() this.$modal.msgError("请先选择导出设备");
setTimeout(msg, 1000)
that.$modal.closeLoading()
} catch (error) {
setTimeout(msg, 1000)
// that.getList()
this.$emit('clearCheck')
that.$modal.closeLoading()
} }
}, },
//打包压缩 //打包压缩
packageImages() { packageImages() {