前端下载二维码、图片、截取页面等皆可用

先下载 html2canvas

js 部分
import html2Canvas from "html2canvas";

function saveImg(val,name) {
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// 先获取你要转换为img的dom节点
var node = document.getElementById(val);//传入的id名称
// console.log("node", node);
var width = node.offsetWidth; //dom宽
var height = node.offsetHeight; //dom高
var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
html2Canvas(node, {
width: width,
heigth: height,
backgroundColor: "#ffffff", //背景颜色 为null是透明
dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
scale: scale,
X: 0,
Y: 0,
scrollX: 0, //如果左边多个白边 设置该偏移-3 或者更多
scrollY: 0,
useCORS: true, //是否使用CORS从服务器加载图像 !!!
allowTaint: true //是否允许跨域图像污染画布 !!!
}).then(canvas => {
// console.log("canvas", canvas);
var url = canvas.toDataURL(); //这里上面不设值cors会报错
var a = document.createElement("a");//创建一个a标签 用来下载
a.download =name+'_案场二维码'; //设置下载的图片名称
var event = new MouseEvent("click");//增加一个点击事件
a.href = url;//此处的url为base64格式的图片资源
a.dispatchEvent(event); //触发a的单击事件 即可完成下载
});
}
//要记得导出
export {
saveImg
}

需要用的页面
先引入
import { saveImg } from "@/store/modules/exportPdf";

//方法里面调用
qrBase(){
//第一个参数是你要截取的元素的id名,第二个参数是设置名字
saveImg('id','图片')
},

复制即用，有帮助记得点赞，不懂私聊我。