vue3.0 + html2canvas 一键截图

例如：

 1、安装 html2canvas：

npm i html2canvas

2、引入 html2canvas：

import html2canvas from "html2canvas"

3、添加截图按钮：

<el-button class="screenshotBtn button" type="text" @click="clickGeneratePicture(orderDataList.id)">一键截图</el-button>

4、截图调用：

function clickGeneratePicture(id :any) {
    html2canvas(imageWrapper.value,{
        logging: false,
        allowTaint: true,
        scale: window.devicePixelRatio,
        scrollY: 0,
        scrollX: 0,
        useCORS: true,
        backgroundColor: '#ffffff',
    }).then(function(canvas){
        // console.log(canvas);
        let imgUrl = canvas.toDataURL( "image/png" );
        var tempLink = document.createElement('a');// 创建一个a标签
        tempLink.style.display = 'none';
        tempLink.href = imgUrl;
        tempLink.setAttribute('download', id);// 给a标签添加下载属性
        if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank');
        }
        document.body.appendChild(tempLink);// 将a标签添加到body当中
        tempLink.click();// 启动下载
        document.body.removeChild(tempLink);// 下载完毕删除a标签
        window.URL.revokeObjectURL(imgUrl);
    });
};

注：样式不能使用 box-shadow 阴影效果，可使用 border 扩大边框代替

---

有 box-shadow 的：

无 box-shadow 的：