console 命令行工具 X clear

console

console.log(html2canvas)

document.getElementById('btn').addEventListener('click',function () {
    let target = document.getElementById('target')
    html2canvas(target).then(  res => {
        console.log(7, res)
        res.toBlob(blob => {
            console.log(8, blob)
             navigator.clipboard.write([
                    // eslint-disable-next-line no-undef
                    new ClipboardItem({
                        [blob.type]: blob
                    })
                ]).then(r=>{
                    console.log(15,r)
                }).catch(err=>{
                    console.error(17,err)
                })
                
        }, 'image/png', 1)
    })
})

<button id='btn'> copy </button>
<div id="target">
    <a href="https://mp.weixin.qq.com/s/lynsxRupaBPt2HF11DpNDQ" >微信文章</a>
API写几行代码的事。我这就去安排
很多2C的移动端H5应用，都会有邀请好友、分享之类的，通常会在前端实时生成一副海报图片，用户可以分享到朋友圈等，这类需求都需要解决前端DOM转图片的问题。今天带来一篇文章，作者从飞书的一键复制网页内容为图片，层层分解前端涉及到的技术点，希望大家看完有收获。下面是正文部分。李经理在使用飞书时无意中发现,飞书竟然支持一键复制网页内容到剪贴板的功能。他立即叫来了公司的前端开发小王,兴致勃勃地说:"小王啊,你看,飞书的这个功能多方便!我们公司的协同办公系统是不是也可以实现类似的功能?这样用户体验一定能得到很大提升!"小王看着李经理充满expectant的眼神, 虽然内心已经吐槽"就这点功能至于吗", 但表面上还是恭恭敬敬地回答:"老板英明,这个功能确实很实用。技术上应该不难实现,主要就是用Clipboard API写几行代码的事。我这就去安排!"
</div>

本项目引用的自定义外部资源

html2canvas.min.js