截图dom 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)
  }

插件bug

这个bug是

省略两行 效果 变成了  最后一行字消失了3分1 且没有省略号 

有想过用绝对定位并且+省略号和空白底   但是会因为文本的内容不确定性 有可能会遮住半个字

所以需要这个效果 就只能换个插件了（有找到解决方法可反馈）