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

更换贺报下载的方法4

Browse Source
This commit is contained in:
xuxingjun
2024-12-25 14:09:02 +08:00
parent 816afd12e2
commit cc9d93b3ae
1 changed files with 55 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
<!-- <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="fenxiang()"> 分享 </button> <button class="shareImg" @click="fenxiang()"> 分享 </button>
<button class="downLoad" @click="downloadFn()"> 下载 </button> <button class="downLoad" @click="domToImage()"> 下载 </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" />
@@ -161,57 +161,67 @@ export default {
let domElement = this.$refs.generateImg; let domElement = this.$refs.generateImg;
async function captureAndProcessImage() { async function captureAndProcessImage() {
try { console.log(1111);
try {
// 获取 DOM 元素 // 获取 DOM 元素
console.log('this.$refs.generateImg', domElement); console.log('this.$refs.generateImg', domElement);
console.log(location); console.log(location);
console.log(2222);
// 使用 html2canvas 捕获图像，并等待其完成 // 使用 html2canvas 捕获图像，并等待其完成
const canvas = await html2canvas(domElement, { const canvas = await html2canvas(domElement, {
width: domElement.offsetWidth, width: domElement.offsetWidth,
height: domElement.offsetHeight, height: domElement.offsetHeight,
backgroundColor: '#fff', backgroundColor: '#fff',
scale: 1, scale: 1,
dpi: 300 dpi: 300
}); });
// 将画布转换为 Blob，并等待其完成 // 将画布转换为 Blob，并等待其完成
const blob = await new Promise((resolve, reject) => { const blob = await new Promise((resolve, reject) => {
canvas.toBlob(resolve, 'image/png'); canvas.toBlob(resolve, 'image/png');
}); console.log(3333);
console.log(blob); });
// 将 Blob 转换为 Base64 字符串，并等待其完成 // let arr = false
const base64String = await new Promise((resolve, reject) => { // // 将 Blob 转换为 Base64 字符串，并等待其完成
const reader = new FileReader() // if(arr == false) {
reader.onloadend = () => resolve(reader.result) // arr = true
reader.onerror = reject var base64String = await new Promise((resolve, reject) => {
reader.readAsDataURL(blob) 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 });
// 检查结果，并处理下载逻辑 // 调用 base64Excel 函数，并等待其完成
if (res.result === '0') { const res = await base64Excel({ base64Img: base64String });
console.log('xingxing');
// if (!this.downLoadJin) { // 检查结果，并处理下载逻辑
// this.downLoadJin = true; if (res.result === '0') {
// 调用原生应用下载接口，并等待其完成 console.log(5555);
await EWebBridge.webCallAppInJs('download', { // if (!this.downLoadJin) {
name: '业绩贺报.png', // this.downLoadJin = true;
url: res.path // 调用原生应用下载接口，并等待其完成
}); await EWebBridge.webCallAppInJs('download', {
console.log('下载完成'); name: '业绩贺报.png',
// } else { url: res.path
// // this.$toast.fail('已有下载任务在进行，请稍后再试！'); });
// } console.log('下载完成');
// 5 秒后重置下载标志 // } else {
// setTimeout(() => { // // this.$toast.fail('已有下载任务在进行，请稍后再试！');
// this.downLoadJin = false; // }
// }, 5000); // 5 秒后重置下载标志
} // setTimeout(() => {
// this.downLoadJin = false;
// }, 5000);
// arr = false
}
} catch (error) { } catch (error) {
console.log(6666);
// 处理整个过程中的任何错误 // 处理整个过程中的任何错误
console.error('Error capturing or processing the image:', error); console.error('Error capturing or processing the image:', error);
// this.$toast.fail('图片处理或下载失败，请重试！'); // this.$toast.fail('图片处理或下载失败，请重试！');
@@ -221,45 +231,6 @@ export default {
// 调用 captureAndProcessImage 函数 // 调用 captureAndProcessImage 函数
captureAndProcessImage(); captureAndProcessImage();
}, },
downloadFn() {
html2canvas(this.$refs.generateImg).then(canvas => {
// 可以在这里处理canvas，如显示、保存等
// 示例：将canvas内容转换为图片并触发下载
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var link = document.createElement('a');
link.download = '业绩贺报.png';
link.href = image;
link.click();
});
},
// getUrlBase64(url, kh) {
// return new Promise((resolve) => {
// let canvas = document.createElement('canvas');
// const ctx = canvas.getContext('2d');
// const img = new Image();
// img.crossOrigin = 'Anonymous'; // 允许跨域
// img.src = url;
// img.onload = () => {
// // eslint-disable-next-line prefer-destructuring
// canvas.height = kh[1];
// // eslint-disable-next-line prefer-destructuring
// canvas.width = kh[0];
// ctx.drawImage(img, 0, 0, kh[0], kh[1]);
// const dataURL = canvas.toDataURL('image/png');
// canvas = null;
// resolve(dataURL);
// };
// });
// },
// download(imgUrl, kh) {
// this.getUrlBase64(imgUrl, kh).then((base64) => {
// const link = document.createElement('a');
// link.href = base64;
// link.download = `业绩贺报.png`;
// link.click();
// // this.$toast('下载成功')
// });
// },
close() { close() {
this.$emit('child-colse', '1') this.$emit('child-colse', '1')
this.$refs.generateImg.src = ''; this.$refs.generateImg.src = '';