更换贺报下载的方法13

This commit is contained in:
xuxingjun
2024-12-26 09:49:44 +08:00
parent 9e381e7510
commit bc34e0591d

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="contents"> <div class="contents">
<div id="capture" ref="generateImg" style="height: 100vh; overflow: hidden"> <div id="capture" ref="xingdownLoad" style="height: 100vh; overflow: hidden">
<img src="@/assets/images/list_img.png" alt="" /> <img src="@/assets/images/list_img.png" alt="" />
<div class="box"> <div class="box">
<div class="title"> <div class="title">
@@ -46,20 +46,20 @@ export default {
} }
}, },
beforeCreate() { beforeCreate() {
this.$refs.generateImg = null; this.$refs.xingdownLoad = null;
}, },
created() { created() {
// this.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; // this.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// if(this.isIOS) { // if(this.isIOS) {
// document.getElementsByClassName('box').style.top = '38%' // document.getElementsByClassName('box').style.top = '38%'
// } // }
this.$refs.generateImg = this.$refs.generateImg this.$refs.xingdownLoad = this.$refs.xingdownLoad
}, },
mounted() { mounted() {
this.getList() this.getList()
}, },
beforeDestroy(){ beforeDestroy(){
this.$refs.generateImg = null; this.$refs.xingdownLoad = null;
}, },
methods: { methods: {
getList() { getList() {
@@ -77,14 +77,14 @@ export default {
}, },
// 分享 // 分享
fenxiang() { fenxiang() {
if(this.$refs.generateImg != this.$refs.generateImg) { if(this.$refs.xingdownLoad != this.$refs.xingdownLoad) {
return return
} }
// const element = document.getElementById('capture') // const element = document.getElementById('capture')
// const canvas = await html2canvas(element) // const canvas = await html2canvas(element)
html2canvas(this.$refs.generateImg, { html2canvas(this.$refs.xingdownLoad, {
width: this.$refs.generateImg.offsetWidth, width: this.$refs.xingdownLoad.offsetWidth,
height: this.$refs.generateImg.offsetHeight, height: this.$refs.xingdownLoad.offsetHeight,
backgroundColor: '#fff', backgroundColor: '#fff',
scale: 2, scale: 2,
dpi: 300 dpi: 300
@@ -113,11 +113,8 @@ export default {
}, },
// 生成图片并下载 // 生成图片并下载
domToImage() { domToImage() {
console.log('this.$refs.generateImg', this.$refs.generateImg); console.log('this.$refs.xingdownLoad', this.$refs.xingdownLoad);
this.$refs.xingdownLoad = this.$refs.xingdownLoad
if(this.$refs.generateImg != this.$refs.generateImg) {
return false
}
// let domElement = this.$refs.generateImg // let domElement = this.$refs.generateImg
// console.log('this.$refs.generateImg',domElement); // console.log('this.$refs.generateImg',domElement);
// console.log(location); // console.log(location);
@@ -174,13 +171,13 @@ export default {
// }) // })
setTimeout(() => { setTimeout(() => {
let domElement = this.$refs.generateImg; let domElement = this.$refs.xingdownLoad;
async function captureAndProcessImage() { async function captureAndProcessImage() {
console.log(1111); console.log(1111);
try { try {
// 获取 DOM 元素 // 获取 DOM 元素
console.log('this.$refs.generateImg', domElement); console.log('domElement', domElement);
console.log(location); console.log(location);
console.log(2222); console.log(2222);
@@ -245,6 +242,7 @@ export default {
// 调用 captureAndProcessImage 函数 // 调用 captureAndProcessImage 函数
captureAndProcessImage(); captureAndProcessImage();
this.$refs.xingdownLoad = null;
return false return false
}, 500); }, 500);
@@ -252,7 +250,7 @@ export default {
}, },
close() { close() {
this.$emit('child-colse', '1') this.$emit('child-colse', '1')
this.$refs.generateImg = null; this.$refs.xingdownLoad = null;
} }
} }
} }