zoukankan      html  css  js  c++  java
  • 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 的:

  • 相关阅读:
    .NET CORE 部署3
    Filezilla
    Java 项目转换为maven项目教程
    Andriod studio 汉化教程
    tarjan好题
    关于二分的边界
    2019-10-11
    诗人小G(1D1D动态规划)
    斜率优化dp(玩具装箱)
    扩展欧几里得定律
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/15353004.html
Copyright © 2011-2022 走看看