html2canvas 将界面元素转化成图片并复制到剪切板

npm install html2canvas --save

<template>
  <div id="copy-outer"></div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  data() {
    return {
      imgUrl: "",
    }
  },
  mounted() { },
  methods: {
    // html2canvas并复制图片到剪切板
    copyContent() {
      html2canvas(document.getElementById("copy-outer")).then(canvas => {
        this.imgUrl = canvas.toDataURL('image/png');
        if (window.location.protocol == "http:") {
          // http环境下无法直接复制图片，需手动复制
        } else {
          this.copyImg();
        }
      })
    },
    copyImg() {
      const parsedBase64 = this.parseBase64(this.imgUrl)
      let type = parsedBase64.type
      // 将base64转为Blob类型
      let bytes = atob(parsedBase64.data)
      let ab = new ArrayBuffer(bytes.length)
      let ua = new Uint8Array(ab)
      for (let i = 0; i < bytes.length; i++) {
        ua[i] = bytes.charCodeAt(i)
      }
      let blob = new Blob([ab], { type })
      navigator.clipboard.write([new ClipboardItem({ [type]: blob })])
      this.$message.success("复制成功");
    },
    parseBase64(base64) {
      let re = new RegExp('data:(?<type>.*?);base64,(?<data>.*)')
      let res = re.exec(base64)
      if (res) {
        return {
          type: res.groups.type,
          ext: res.groups.type.split('/').slice(-1)[0],
          data: res.groups.data,
        }
      }
    },
  },
};
</script>

<style scoped lang="stylus"></style>