vue3项目生成海报下载，页面截图下载。生成二微码的插件。

首先要依赖我们的第三方的插件 "html2canvas": "^1.4.1", 它的npm官网是 html2canvas上代码看注释。用的技术栈vue3 + ts + vite 安装命令 npm i html2canvas

<template>
  <div style="display: flex">
    <!-- 这个是生成海报或者是截图 -->
    <div class="box-img">
      <h1>来截图 生成海报</h1>
      <div id="capture" style="background: #f5da55">
        <h4 style="color: #000">Hello world!</h4>
      </div>
      <button @click="screenshotHandler">截图</button>
    </div>
  </div>
</template>
<script setup lang="ts">
// 这个是截图工具
import html2canvas from "html2canvas";
import { ref } from "vue";
function screenshotHandler() {
  html2canvas(document.body).then(function (canvas) {
    let a = document.createElement("a");
    // 将 canvas  方法返回一个包含图片展示的 data URI 。可以使用 type
    // 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
    a.href = canvas.toDataURL("image/png", 1.0);
    //将 a 标签插入到页面中
    document.body.appendChild(a);
    //download 下载图片
    a.download = canvas.toDataURL("image/png", 1.0);
    // 模拟a标签的点击事件
    var e = document.createEvent("MouseEvents");
    e.initEvent("click", true, true);
    a.dispatchEvent(e);
    // 这是向 body 追加自己截的图
    // document.body.appendChild(canvas);
  });
}
</script>
<style>
.box-img {
  width: 400px;
  height: 200px;
  background-color: rgb(26, 228, 202);
}
.warp-box {
  width: 400px;
  height: 200px;
  background-color: pink;
}
</style>

生成二维码的插件输入网址就可以生成二维码 qrcode上代码 使用技术 vue2
安装命令 npm i qrcode

<template>
  <div class="">
    <div class="warp-box">
      <!-- 这个是二维码 -->
      <canvas id="canvas" ref="code"></canvas>
      <button @click="addQRCode">生成二维码</button>
    </div>
  </div>
</template>

<script>
// 这个是生成二维码的插件
import qrcode from "qrcode";
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 生成code码的
    addQRCode() {
      qrcode.toCanvas(this.$refs.code, "http://www.baidu.com", function(error) {
        console.log(error);
      });
    },
  },
  components: {},
};
</script>

<style lang="scss">
.warp-box {
  width: 400px;
  height: 200px;
  background-color: pink;
}
</style>