vue页面下载成截图图片

首先 先安装 html2canvas

npm install --save html2canvas

然后下面是完整代码

<template>
	<div>
		<div ref="imageWrapper">
			<div>
				<img src="图片路径" />
				<p>文字</p>
			</div>
		</div>
		<div>
			<button @click="toImage">生成截图</button>
		</div>
	</div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
	data() {
		return {imgUrl: ''}
	},
	created: function() {},
	methods: {
		toImage() {
			html2canvas(this.$refs.imageWrapper).then((canvas) => {
				let dataURL = canvas.toDataURL('image/png')
				this.imgUrl = dataURL
				var a = document.createElement('a') // 生成一个a元素
				var event = new MouseEvent('click') // 创建一个单击事件
				a.download = name || 'photo' // 设置图片名称
				a.href = dataURL // 将生成的URL设置为a.href属性
				a.dispatchEvent(event) // 触发a的单击事件
			})
		},
	},
}
</script>
<style lang="scss" scoped></style>

 还有其他的下载方法，不过跟上面的差不多，也可以写上，都能下载图片

<template>
	<div>
		<div ref="imageWrapper">
			<div>
				<img src="图片地址" />
				<p>支付文字</p>
			</div>
		</div>
		<div>
			<button @click="toImage">生成截图</button>
		</div>
	</div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
	data() {
		return {imgUrl: ''}
	},
	created: function() {},
	methods: {
		toImage() {
			html2canvas(this.$refs.imageWrapper).then((canvas) => {
				let dataURL = canvas.toDataURL('image/png')
				this.imgUrl = dataURL
				if (this.imgUrl !== '') {
					// this.download(this.imgUrl)  // 方法一
					this.downloadImage(this.imgUrl)  // 方法二（移动端也可以下载；ps：微信浏览器不能下载）
				}
			})
		},
		download(imgUrl) {
			let imgData = imgUrl //这里放需要下载的base64
			this.downloadFile('测试.png', imgData)
		},
		//下载
		downloadFile(fileName, content) {
			let aLink = document.createElement('a')
			let blob = this.base64ToBlob(content) //new Blob([content]);

			let evt = document.createEvent('HTMLEvents')
			evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
			aLink.download = fileName
			aLink.href = URL.createObjectURL(blob)

			// aLink.dispatchEvent(evt);
			aLink.click()
		},
		//base64转blob
		downloadImage(base64Url) {
			let imgUrl = base64Url
			if (window.navigator.msSaveOrOpenBlob) {
				//兼容IE浏览器的写法
				let imageStr = atob(imgUrl.split(',')[1])
				let n = imageStr.length
				let u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = imageStr.charCodeAt(n)
				}
				let blob = new Blob([u8arr])
				window.navigator.msSaveOrOpenBlob(
					blob,
					'chart-download' + '.' + 'png'
				)
			} else {
				//非IE浏览器
				let a = document.createElement('a')
				a.href = imgUrl
				a.setAttribute('download', 'chart-download')
				a.click()
			}
		},
	},
}
</script>
<style lang="scss" scoped></style>

如果有其他更好方法欢迎留言！