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 且没有省略号
有想过用绝对定位并且+省略号和空白底 但是会因为文本的内容不确定性 有可能会遮住半个字
所以需要这个效果 就只能换个插件了(有找到解决方法可反馈)