【Vue】把页面上的某个div转化成base64图片，并且下载到本地。vue、h5页面下载图片到本地。页面转化base64文件下载到本地

---

前言

接上一篇，生成带log二维码。
把二维码保存到本地

---

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

1.引入 html2canvas库

代码如下（示例）：

npm install --save html2canvas
1

2.页面中引入

代码如下（示例）：

import html2canvas from "html2canvas"
1

3.页面中引入

// 保存二维码图片
saveImageCode() {
	html2canvas(this.$refs.downImg).then(canvas => {
		// 转成图片，生成图片地址
		let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
		console.log(imgUrl);
		let a = document.createElement('a')
		a.href = imgUrl;
		a.download = "文件分享二维码"; //文件名
		document.body.appendChild(a);
		a.click(); // 触发点击
		document.body.removeChild(a); // 然后移除
					
		// Dialog.alert({
		// 	message: '请长按图片保存到本地',
		// 	confirmButtonColor:"#418AF1"
		// }).then(() => {
		// 	// on close
		// 	ImagePreview([imgUrl]);
		// });
	});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注意

在pc端中可以使用a标签去下载base64文件，但是移动端，在手机上。是不能下载base64文件的。

我这里通过用VantUI的图片预览组件。然后加上提示语句，让用户去长按保存。
Vant图片预览官方地址

除非把base64文件传给后台，后台给一个地址。不然也没更好的方法了。找遍了csdn。没啥能实现的教程。

---

如果是移动端，把click点击事件注释，把图片预览取消注释
ImagePreview(‘图片路径’]);这个是vantui预览图片的语句

使用时需引入。