html2canvas使用文档 setup

1 安装

npm install --save html2canvas

yarn add html2canvas

2 demo 引入

import html2canvas from 'html2canvas';

?demo? ?会直接下载div ref =picture? 里面的内容

中间内容可忽视?

 <div ref="picture">
            <div class="flex text-[20px] text-[#333] justify-center items-center flex-col">
              <a-input class="!w-[300px]" readonly :value="copyCourseShareText" />
            </div>

            <div id="codeImg" class="code-img">
              <Image :src="qrcode" class="" />
              <!-- <div> <Image :src="getFocusCompany.logo" alt="" class="centrale-img" /> </div> -->
            </div>
          </div>

js

 const picture = ref() 
 // 生成图片
  const creatImg = () => {
    const setup = {
      useCORS: true // 使用跨域
    }
    html2canvas(picture.value, setup).then(canvas => {
      const link = canvas.toDataURL('image/jpg')
      exportPicture(link, '分享課程')
    })
  }

  // 导出图片
  const exportPicture = (link, name = '未命名文件') => {
    const file = document.createElement('a')
    file.style.display = 'none'
    file.href = link
    file.download = decodeURI(name)
    document.body.appendChild(file)
    file.click()
    document.body.removeChild(file)
  }