vue3 使用 html2canvas转图片并下载

安装

yarn add html2canvas // 或者 npm install html2canvas

按需导入

import html2canvas from 'html2canvas';

template部分

<template>
    <div id="downPoster">生成图片<div>
</template>

setup

<script lang="ts" setup>
/** html转base64 */
const savePoster = () => {
  html2canvas(document.querySelector("#downPoster"),{useCORS: true}).then((canvas: any) => {
    downloadBase64(canvas.toDataURL(), "下载图片名");
  });
};
/** 下载图片 */
const downloadBase64 =  (dataUrl:string,fileName:string ='download',fileExtension:string = "png") => {
  // 将 base64 字符串转换为 Blob 对象
  const byteCharacters = atob(dataUrl.split(',')[1])
  const byteArrays = []
  for (let offset = 0; offset < byteCharacters.length; offset += 10240) {
    const slice = byteCharacters.slice(offset, offset + 10240)
    const byteNumbers = new Array(slice.length)
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i)
    }
    const byteArray = new Uint8Array(byteNumbers)
    byteArrays.push(byteArray)
  }
  const blob = new Blob(byteArrays, { type: 'application/octet-stream' })
  const blobUrl = URL.createObjectURL(blob)
  const creatDom = document.createElement('a')
  document.body.appendChild(creatDom)
  creatDom.href = blobUrl
  creatDom.download = `${fileName}.${fileExtension}`;
  creatDom.click()
  document.body.removeChild(creatDom)
  URL.revokeObjectURL(blobUrl)
}
</script>

如果用了ts会导致找不到类型声明问题

解决：新建一个.d.ts后缀文件，例如 index.d.ts

declare module "html2canvas"

效果：