hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-11 02:46:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

更换贺报下载的方法30

Browse Source
This commit is contained in:
xuxingjun
2024-12-31 13:58:49 +08:00
parent 2adaa0aa17
commit 92cb1c466a
1 changed files with 84 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/views/ebiz/generateImg/generateImg.vue
View File

@@ -16,8 +16,8 @@
<div class="flex justify-content-s bottom-btn border-color"> <div class="flex justify-content-s bottom-btn border-color">
<!-- <van-button square type="default" :disabled="shareJin" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button> --> <!-- <van-button square type="default" :disabled="shareJin" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button> -->
<!-- <van-button square type="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> --> <!-- <van-button square type="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> -->
<button class="shareImg" @click="shareImg()" v-no-more-click="1000"> 分享 </button> <button class="shareImg" @click="fenxiang()" v-no-more-click="1000"> 分享 </button>
<button class="downLoad" @click="downLoadImagesFunc()" v-no-more-click="1000"> 下载 </button> <button class="downLoad" @click="domToImage()" v-no-more-click="1000"> 下载 </button>
</div> </div>
<div class="close" @click="close()"> <div class="close" @click="close()">
<van-icon name="cross" size="38" color="#fff" /> <van-icon name="cross" size="38" color="#fff" />
@@ -76,85 +76,99 @@ export default {
}) })
}, },
// 分享 // 分享
shareImg() { fenxiang() {
if(this.$refs.xingdownLoad != this.$refs.xingdownLoad) {
return
}
// const element = document.getElementById('capture') // const element = document.getElementById('capture')
// const canvas = await html2canvas(element) // const canvas = await html2canvas(element)
html2canvas(this.$refs.xingdownLoad, { html2canvas(this.$refs.xingdownLoad, {
width: this.$refs.xingdownLoad.offsetWidth, width: this.$refs.xingdownLoad.offsetWidth,
height: this.$refs.xingdownLoad.offsetHeight, height: this.$refs.xingdownLoad.offsetHeight,
backgroundColor: '#fff', backgroundColor: '#fff',
scale: 2, scale: 2,
dpi: 300 dpi: 300
}).then((canvas) => { }).then((canvas) => {
// 将 canvas 转换为 Blob console.log('分享');
canvas.toBlob((blob) => { // 将 canvas 转换为 Blob
this.blobToBase64(blob).then((base64String) => { canvas.toBlob((blob) => {
let base64Manane = base64String.split(',')[1] this.blobToBase64(blob).then((base64String) => {
// console.log(base64String) let base64Manane = base64String.split(',')[1]
EWebBridge.webCallAppInJs('bridge', { console.log(base64Manane);
flag: 'share', EWebBridge.webCallAppInJs('bridge', {
extra: { flag: 'share',
shareType: '1', extra: {
base64: base64Manane shareType: '1',
} base64: base64Manane
}
})
}) })
}) }, 'image/png')
setTimeout(() => { })
this.close(); setTimeout(() => {
}, 3000); this.close()
}, 'image/png') }, 3000);
})
}, },
// 生成图片并下载 // 生成图片并下载
domToImage(domElement, quality, callback) { domToImage() {
// console.log(domElement); let domElement = this.$refs.xingdownLoad;
html2canvas(domElement, { // 调用 captureAndProcessImage 函数
width: domElement.offsetWidth, this.captureAndProcessImage(domElement);
height: domElement.offsetHeight, return false
backgroundColor: '#fff',
scale: 1,
dpi: 300
}).then((canvas) => {
// 转换canvas为PNG图片并压缩
canvas.toBlob(
(blob) => {
this.blobToBase64(blob).then((base64String) => {
base64Excel({ base64Img: base64String }).then(res => {
console.log(res);
window.localStorage.setItem('saveImg', res.path)
if (res.result == '0' && res.path != localStorage.getItem("saveImg")) {
EWebBridge.webCallAppInJs('download', {
name: '业绩贺报.png',
url: res.path
})
.then(() => {
console.log('下载完成')
})
.catch(() => {
this.$toast.fail('图片下载失败，请重新下载！')
})
}
})
})
},
'image/png'
// quality
)
})
setTimeout(() => {
this.close();
}, 3000);
}, },
downLoadImagesFunc() { async captureAndProcessImage(domElement) {
this.domToImage(this.$refs.xingdownLoad) // try {
// 获取 DOM 元素
// 使用 html2canvas 捕获图像，并等待其完成
var canvas = await html2canvas(domElement, {
width: domElement.offsetWidth,
height: domElement.offsetHeight,
backgroundColor: '#fff',
scale: 1,
dpi: 300
});
console.log('下载',canvas);
// 将画布转换为 Blob，并等待其完成
const blob = await new Promise((resolve, reject) => {
canvas.toBlob(resolve, 'image/png');
});
var base64String = await new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
console.log(4444);
})
// 调用 base64Excel 函数，并等待其完成
const res = await base64Excel({ base64Img: base64String });
// 检查结果，并处理下载逻辑
if (res.result === '0') {
console.log(5555);
console.log(res.path);
console.log(EWebBridge);
EWebBridge.webCallAppInJs('download', {
name: '业绩贺报.png',
url: res.path
}).then(() => {
console.log('下载完成')
}).catch(() => {
// this.$toast.fail('图片下载失败，请重新下载！')
})
}
// } catch (error) {
// // 处理整个过程中的任何错误
// console.error('Error capturing or processing the image:', error);
// }
}, },
close() { close() {
console.log(15434678); console.log(15434678);
// document.documentElement.removeChild(this.$refs.xingdownLoad)
// this.$refs.xingdownLoad.removeChild(this.$refs.xingdownLoad);
document.getElementById('capture').innerHTML = ''; document.getElementById('capture').innerHTML = '';
this.$emit('child-colse', '1') this.$emit('child-colse', '1')
}, },