更换贺报下载的方法21

This commit is contained in:
xuxingjun
2024-12-30 09:17:35 +08:00
parent ae74bca743
commit f4a3ac8e18
3 changed files with 28 additions and 4 deletions

5
package-lock.json generated
View File

@@ -6896,6 +6896,11 @@
}
}
},
"file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

View File

@@ -26,6 +26,7 @@
"crypto-js": "^4.1.1",
"echarts": "^4.2.1",
"fastclick": "^1.0.6",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"js-base64": "^2.5.1",
"js-md5": "^0.7.3",

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="danger" :disabled="downLoadJin" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button> -->
<button class="shareImg" @click="fenxiang()" v-no-more-click="1000"> 分享 </button>
<button class="downLoad" @click="domToImage()" v-no-more-click="1000"> 下载 </button>
<button class="downLoad" @click="saveImg()" v-no-more-click="1000"> 下载 </button>
</div>
<div class="close" @click="close()">
<van-icon name="cross" size="38" color="#fff" />
@@ -27,6 +27,7 @@
<script>
import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'
import { base64Excel } from '@/api/ebiz/nbs'
export default {
name: 'generateImg',
@@ -53,11 +54,9 @@ export default {
if(this.isIOS) {
document.getElementsByClassName('box').style.top = '38%'
}
console.log('xing',this.$refs.xingdownLoad);
},
mounted() {
this.getList()
console.log('xing',this.$refs.xingdownLoad);
},
beforeDestroy(){
this.$refs.xingdownLoad.innerHTML = ''; // 清空内容
@@ -65,7 +64,7 @@ export default {
methods: {
getList() {
this.orderList = JSON.parse(localStorage.getItem('orderList'))
console.log('页面数据',this.orderList);
// console.log('页面数据',this.orderList);
},
// 将 Blob转base64
blobToBase64(blob) {
@@ -216,6 +215,25 @@ export default {
return false
}, 500);
},
saveImg() {
const content = this.$refs.xingdownLoad // 要下载成图片的dom
if (!content) {
return
}
html2canvas(content, {
scale: 2, // 放大倍数,支持小数,可以控制清晰度
letterRendering: true,
backgroundColor: '#fff',
height: content.clientHeight, // 要转化为图片下载的dom 高度
width: content.clientWidth,
}).then((canvas) => {
canvas.toBlob(blob => {
saveAs(blob, `业绩贺报.png`)
}, 'image/png')
this.$toast('下载成功');
})
},
close() {
this.$refs.xingdownLoad.innerHTML = ''; // 清空内容
setTimeout(() => {