页面保存为图片，生成自己的二维码名片

//生成二维码名片
 <div class="qrcode">
    <!-- <div class="qrcode" id="qrcode"></div> -->
     <div class="qrcode1">
       <img :src="res" alt="" />
     </div>
     <div class="qrcode-tip">（长按二维码保存联系方式到手机通讯录）</div>
   </div>
 //保存为图片
<div class="btn" @click="download">保存</div>

import html2canvas from "html2canvas";
import QRCode from "qrcode";

//点击保存 生成图片且下载下载
const download = () => {
  show1.value = false;
  setTimeout(() => {
    let canvasID = document.getElementById("index1"); // 获取要生成图片的页面元素
    html2canvas(canvasID, {
      scale: 6, //数值越大生成的图片越清晰
      backgroundColor: null, //解决生成的图片有白边
    }).then((canvas) => {
      let dataURL = canvas.toDataURL("image/png");
      // uploadFile(dataURL);
      // saveFile(dataURL, "图片名称");
      var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据'
      var a = document.createElement("a"); // 生成一个a元素
      var event = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
      }); // 创建一个单击事件
      a.download = "photo"; // 设置图片名称
      a.href = url; // 将生成的URL设置为a.href属性
      a.dispatchEvent(event); // 触发a的单击事件
    });
  }, 500);
};
//生成二维码名片
const res = ref("");
// 生成图片并保存
const generateQR = async () => {
  try {
    var info =
      "BEGIN:VCARD\n" +
      "FN:" +
      name.value +
      "\n" +
      "ORG:" +
      company.value +
      "\n" +
      "TITLE:" +
      title.value +
      "\n" +
      "WORK:" +
      address.value +
      "\n" +
      "TEL:" +
      tel.value +
      "\n" +
      "EMAIL:" +
      email.value +
      "\n" +
      // "URL:" +
      // web.value +
      // "\n" +
      "NOTE:" +
      desc.value +
      "\n" +
      "END:VCARD";
    res.value = await QRCode.toDataURL(info);
  } catch (err) {
    console.error(err);
  }
};
generateQR();