.net html2canvas网页截图生成图片并保存到本地

最新推荐文章于 2025-07-01 15:37:54 发布

xlb_123

最新推荐文章于 2025-07-01 15:37:54 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： css相关 web前端开发

本文链接：https://blog.youkuaiyun.com/qq736150416/article/details/82762003

web前端开发同时被 2 个专栏收录

153 篇文章

订阅专栏

css相关

33 篇文章

订阅专栏

本文介绍如何利用html2canvas库将网页内容转换为图片并保存到本地，针对长页面可能出现截图不全的问题，提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页截图，并保存到本地，页面长度过长，可能会出现截图不成功的情况，这个暂时还没解决。

(1)引用jquery.js和html2canvas.js（下载地址：https://github.com/niklasvh/html2canvas/releases ，下载的版本是 v0.4.1 - 7.9.2013）

(2)html代码：



<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <link href="/content/PlugIn/icon3/iconfont.css" rel="stylesheet"/>
<link href="/content/css/templete/templete.css" rel="stylesheet"/>
<link href="/content/css/page/article.css" rel="stylesheet"/>

</head>
<body id="activity-detail" class="zh_CN sougou_body">
    <div id="js_article" class="rich_media">
        <div class="rich_media_inner">
            <div id="page-content">
                <div id="img-content" class="rich_media_area_primary">
                    <div class="targetDom" id="targetDom">
                        <h2 class="rich_media_title" id="js_title"></h2>
                        <div class="rich_media_meta_list">
                            <em id="post-date" class="rich_media_meta rich_media_meta_text"></em>
                            <a class="rich_media_meta rich_media_meta_link rich_media_meta_nickname" href="javascript:void(0);"
                               id="post-time"></a>
                        </div>
                        <div class="targetDomContent" id="targetDomContent">
                            <div class="rich_media_content " id="js_content">
                            </div>
                        </div>

                        <p><br></p>
                    </div>
                    <div class="rich_media_tool">
                        原文链接：
                        <input style="height:30px;width:96%" id="ContentSourceUrl" type="text" value="" readonly="readonly">
                    </div>
                </div>
            </div>
        </div>
    </div>


                                    <button type="button" class="exp u-btn u-btn-primary u-btn-small generateimg">
                                        <span>生成长图</span>
                                    </button>
                               

    <!-- 回到顶部 -->
    <div class="toTop">
        <i class="icon iconfont icon-iconfont-yoyo-15"></i>
    </div>

    <!-- 生成弹窗 -->
    <div class="Popup popup_genrate" style="display:none;">
        <div class="mask"></div>
        <div class="messageBox sendMessagePopup">
            <div class="modal-head">
                <p class="title">生成长图</p>
            </div>

            <div class="modal-body">
                <div class="modal-sendMess modal-templateList ">
                    <ul>
                        <li>
                            <label for=""><i class="icon iconfont icon-yuandianxiao"></i>生成选项设置：</label>
                            <div>
                                <p class="contains-title">
                                    <input type="checkbox" name="IsContainsTitle" id="IsContainsTitle">包含文章标题等相关信息
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="modal-footer">
                <button class="canclebtn">取消</button>
                <button class="surebtn" id="btnGenerate">生成长图</button>
            </div>
        </div>
    </div>

    <div class="Popup popup_img" style="display:none;">
        <div class="mask"></div>
        <div class="messageBox sendMessagePopup">
            <div class="modal-head">
                <p class="title">生成长图</p>
            </div>

            <div class="modal-body" style="height:390px; overflow-y:scroll;">
                <img src="" id="generateImg" style="width:100%;" />
            </div>

            <div class="modal-footer">
                <button class="canclebtn">取消</button>
                <button class="surebtn" id="btnDownImg">下载图片</button>
                <br />
                <span class="tips_save">注：如图片下载失败，可手动鼠标右键“图片另存为”</span>
            </div>
        </div>
    </div>

    <div style="width:500px; margin-top:20px;display:none;">
        <img id="screenShotImg" src="" crossorigin="Anonymous">
    </div>
    <a id="tttt"></a>
</body>
</html>
<script src="/content/plugIn/jquery-1.9.1.min.js"></script>
<script src="/content/plugIn/layer/layer/layer.js"></script><!--该js是弹窗js-->
<script src="/content/plugin/html2canvas.js"></script>

<script type="text/javascript">
    $(function () {
        $(".generateimg").click(function () {
            $(".popup_genrate").show();
        });
        $(".popup_genrate .canclebtn").click(function () {
            $(".popup_genrate").hide();
        });
        $(".popup_img .canclebtn").click(function () {
            $(".popup_img").hide();
        });
    })

        $(".contains-title").click(function () {
        if ($("input[type=checkbox][name='IsContainsTitle']").is(':checked')) {
            $("input[type=checkbox][name='IsContainsTitle']").prop("checked", false);
        }
        else {
            $("input[type=checkbox][name='IsContainsTitle']").prop("checked", true);
        }
    });

    var layer_index;
    document.querySelector('#btnGenerate').onclick = function () {
        layer_index = layer.load(3, {
            shade: [0.1, '#fff']
        });

        var objDiv = $("#targetDomContent");
        if ($("input[type=checkbox][name='IsContainsTitle']").is(':checked')) {
            objDiv = $('#targetDom');
        }

        screenShot(objDiv, function (canvas, width, height) {

            var srcblob = dataURLtoBlob(canvas);
            var srcimg = window.URL.createObjectURL(srcblob);
            console.log("srcblob:" + srcimg);

            document.querySelector('#screenShotImg').src = srcimg;
            document.querySelector('#screenShotImg').style.width = width + "px";
            document.querySelector('#screenShotImg').style.height = height + "px";
            document.querySelector('#generateImg').src = srcimg;
            DownImg("test.jpg", srcimg);
        });

        $(".popup_genrate").hide();
    }

    function dataURLtoBlob(dataurl) {
        try {

            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
        catch (ex) {
            layer.msg("内容过长，请重新编辑内容！");
            layer.close(layer_index);
        }
    }

    //例如data:image/jpeg;base64,/9j/4AAQSkZJRg

    /**
     * 截图功能
     * targetDom 要克隆的目标dom元素
     * cb 回调函数
     */
    function screenShot(targetDom, cb) {
        try {
            var copyDom = targetDom;// targetDom.clone();//克隆dom节点
            //copyDom.css('display', 'block');
            //$('body').append(copyDom);//把copy的截图对象追加到body后面
            var width = copyDom.width();//dom宽
            var height = copyDom.height();//dom高

            console.log("height:" + height);
            var scale = 2;//画布放大倍数
            var canvas = document.createElement('canvas');
            canvas.width = width * scale;//canvas宽度
            canvas.height = height * scale;//canvas高度

            console.log("canvas.height:" + canvas.height);

            var content = canvas.getContext("2d");
            content.scale(scale, scale);

            var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
            content.translate(-rect.left, -rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
            html2canvas(copyDom, {
                allowTaint: false, //允许污染
                tainTest: false,
                scale: scale,
                canvas: canvas,
                onrendered: function (canvas) {
                    if (cb) {
                        //copyDom.css('display', 'none');

                        //console.log(canvas.toDataURL("image/jpeg", 0));
                        //使用 canvas.toDataURL('image/jpeg',1);可以对canvas导出内容做格式转换，如果导出的图片太大，可以将quality值设置小一些，0~1,1代表无损
                        if (height >= 30000) {
                            cb(canvas.toDataURL("image/png", 0), width, height);
                        }
                        else if (height >= 24180 && height < 30000) {
                            cb(canvas.toDataURL("image/png", 0.9), width, height);
                        }
                        else {
                            cb(canvas.toDataURL("image/png", 1), width, height);
                        }

                    }
                }
            });
        }
        catch (err) {
            layer.msg("图片生成失败！");
            layer.close(layer_index);
        }
    }

    /**
     * 下载图片
     */
    function DownImg(filename, srcUrl) {
        var csvContent = srcUrl;// $("#screenShotImg").attr("src");

        //var userAgent = navigator.userAgent;
        //var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
        //if (isIE) {
        //    var blob = csvContent.msToBlob();
        //    window.navigator.msSaveBlob(blob, 'img.png');

        //    $(".popup_img").show();
        //}

        if (window.navigator.msSaveOrOpenBlob) {// if browser is IE

            //var blob = new Blob([decodeURIComponent(encodeURI(csvContent))], {
            //    type: "text/csv;charset=utf-8;"
            //});
            //navigator.msSaveBlob(srcUrl, filename);//filename文件名包括扩展名，下载路径为浏览器默认路径

            $(".popup_img").show();
        }
        else {
            $(".popup_img").show();
            var encodedUri = encodeURI(csvContent);//encodeURI识别转义符
            var alink = document.createElement("a");
            alink.setAttribute("href", encodedUri);
            alink.setAttribute("download", filename);
            document.body.appendChild(alink);
            alink.click();
            alink.remove();
        }

        layer.msg("图片生成成功！");
        layer.close(layer_index);
    };

    $("#btnDownImg").click(function () {
        down();
    });

    /**
 * 下载图片
 */
    function down() {
        var url = $("#screenShotImg").attr("src");
        //以下代码为下载此图片功能
        var triggerDownload = $("#tttt").attr("href", url).attr("download", "test1.png");
        triggerDownload[0].click();
    }
</script>

(3)样式：

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    line-height: 1.6;
}

body {
    -webkit-touch-callout: none;
    font-family: -apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background-color: #f3f3f3;
    line-height: inherit;
}

    body.rich_media_empty_extra {
        background-color: #fff;
    }

        body.rich_media_empty_extra .rich_media_area_primary:before {
            display: none;
        }

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    font-size: 16px;
}

* {
    margin: 0;
    padding: 0;
}

a {
    color: #607fa6;
    text-decoration: none;
}

/*html, body {
    height: auto;
}*/

.rich_media_inner {
    font-size: 16px;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.rich_media_area_primary {
    position: relative;
    padding: 0;
    background-color: #fff;
}

    .rich_media_area_primary:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #e5e5e5;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        top: auto;
        bottom: -2px;
    }

    .rich_media_area_primary .original_img_wrp {
        display: inline-block;
        font-size: 0;
    }

        .rich_media_area_primary .original_img_wrp .tips_global {
            display: block;
            margin-top: .5em;
            font-size: 14px;
            text-align: right;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
        }

.rich_media_area_extra {
    padding: 0 15px 0;
}

.rich_media_title {
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 600;
    font-size: 18px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rich_media_meta_list {
    margin-bottom: 18px;
    line-height: 20px;
    font-size: 0;
}

    .rich_media_meta_list em {
        font-style: normal;
    }

.rich_media_meta {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 10px;
    font-size: 16px;
}

.meta_original_tag {
    display: inline-block;
    vertical-align: middle;
    padding: 1px .5em;
    border: 1px solid #9e9e9e;
    color: #8c8c8c;
    border-top-left-radius: 20% 50%;
    -moz-border-radius-topleft: 20% 50%;
    -webkit-border-top-left-radius: 20% 50%;
    border-top-right-radius: 20% 50%;
    -moz-border-radius-topright: 20% 50%;
    -webkit-border-top-right-radius: 20% 50%;
    border-bottom-left-radius: 20% 50%;
    -moz-border-radius-bottomleft: 20% 50%;
    -webkit-border-bottom-left-radius: 20% 50%;
    border-bottom-right-radius: 20% 50%;
    -moz-border-radius-bottomright: 20% 50%;
    -webkit-border-bottom-right-radius: 20% 50%;
    font-size: 15px;
    line-height: 1.1;
}

.meta_enterprise_tag img {
    width: 30px;
    height: 30px !important;
    display: block;
    position: relative;
    margin-top: -3px;
    border: 0;
}

.rich_media_meta_text {
    color: #8c8c8c;
}

span.rich_media_meta_nickname {
    display: none;
}

.rich_media_thumb_wrp {
    margin-bottom: 6px;
}

    .rich_media_thumb_wrp .original_img_wrp {
        display: block;
    }

.rich_media_thumb {
    display: block;
    width: 100%;
}

.rich_media_content {
    overflow: hidden;
    color: #3e3e3e;
}

    .rich_media_content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        word-wrap: break-word !important;
    }

    .rich_media_content p {
        clear: both;
        min-height: 1em;
    }

    .rich_media_content em {
        font-style: italic;
    }

    .rich_media_content fieldset {
        min-width: 0;
    }

    .rich_media_content .list-paddingleft-2 {
        padding-left: 30px;
    }

    .rich_media_content blockquote {
        margin: 0;
        padding-left: 10px;
        border-left: 3px solid #dbdbdb;
    }

img {
    height: auto !important;
}

@media screen and (device-aspect-ratio:2/3),screen and (device-aspect-ratio:40/71) {
    .meta_original_tag {
        padding-top: 0;
    }
}

@media(min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) {
    .mm_appmsg .rich_media_inner, .mm_appmsg .rich_media_meta, .mm_appmsg .discuss_list, .mm_appmsg .rich_media_extra, .mm_appmsg .title_tips .tips {
        font-size: 17px;
    }

    .mm_appmsg .meta_original_tag {
        font-size: 15px;
    }
}

@media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3) {
    .mm_appmsg .rich_media_title {
        font-size: 25px;
    }
}

@media screen and (min-width:1024px) {
    .rich_media {
        width: 677px;
        margin-left: auto;
        margin-right: auto;
    }

    .rich_media_inner {
        padding: 20px;
    }

    body {
        background-color: #fff;
    }
}

@media screen and (min-width:1025px) {
    body {
        font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    }

    .rich_media {
        position: relative;
    }

    .rich_media_inner {
        background-color: #fff;
        padding-bottom: 100px;
    }
}

.radius_avatar {
    display: inline-block;
    background-color: #fff;
    padding: 3px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
}

    .radius_avatar img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: #eee;
    }

.cell {
    padding: .8em 0;
    display: block;
    position: relative;
}

.cell_hd, .cell_bd, .cell_ft {
    display: table-cell;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
}

.cell_primary {
    width: 2000px;
    white-space: normal;
}

.flex_cell {
    padding: 10px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex_cell_primary {
    width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
    flex: 1;
}

.original_tool_area {
    display: block;
    padding: .75em 1em 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    color: #3e3e3e;
    border: 1px solid #eaeaea;
    margin: 20px 0;
}

    .original_tool_area .tips_global {
        position: relative;
        padding-bottom: .5em;
        font-size: 15px;
    }

        .original_tool_area .tips_global:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #dbdbdb;
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

    .original_tool_area .radius_avatar {
        width: 27px;
        height: 27px;
        padding: 0;
        margin-right: .5em;
    }

        .original_tool_area .radius_avatar img {
            height: 100% !important;
        }

    .original_tool_area .flex_cell_bd {
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }

    .original_tool_area .flex_cell_ft {
        font-size: 14px;
        color: #8c8c8c;
        padding-left: 1em;
        white-space: nowrap;
    }

    .original_tool_area .icon_access:after {
        content: " ";
        display: inline-block;
        height: 8px;
        width: 8px;
        border-width: 1px 1px 0 0;
        border-color: #cbcad0;
        border-style: solid;
        transform: matrix(0.71,0.71,-0.71,0.71,0,0);
        -ms-transform: matrix(0.71,0.71,-0.71,0.71,0,0);
        -webkit-transform: matrix(0.71,0.71,-0.71,0.71,0,0);
        position: relative;
        top: -2px;
        top: -1px;
    }

.rich_media_global_msg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1em 35px 1em 15px;
    z-index: 1;
    background-color: #c6e0f8;
    color: #8c8c8c;
    font-size: 13px;
}

    .rich_media_global_msg .icon_closed {
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -5px;
        line-height: 300px;
        overflow: hidden;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        background: transparent url(/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_appmsg_msg_closed_sprite.2x.png) no-repeat 0 0;
        width: 11px;
        height: 11px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
    }

        .rich_media_global_msg .icon_closed:active {
            background-position: 0 -17px;
        }

.preview_appmsg .rich_media_title {
    margin-top: 1.9em;
}

@media screen and (min-width:1024px) {
    .rich_media_global_msg {
        position: relative;
        margin: 0 20px;
    }

    .preview_appmsg .rich_media_title {
        margin-top: 0;
    }
}

.rich_media_content p {
    word-wrap: break-word;
    font-size: 17px;
    line-height: 40px;
    text-align: left;
}

.u-btn {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    border: none;
    line-height: 30px;
    min-height: 30px;
    font-size: 1rem;
    padding: 0 12px;
    background: #eee;
    color: #444;
}

.u-btn-primary {
    background-color: #22a3f4;
    color: #fff;
}

.u-btn-success {
    background-color: #8cc14c;
    color: #fff;
}

.u-btn-danger {
    background-color: #da314b;
    color: #fff;
}

.u-btn-mini {
    min-height: 20px;
    padding: 0 6px;
    line-height: 20px;
}

.u-btn-small {
    min-height: 25px;
    padding: 0 10px;
    line-height: 25px;
    border-radius: 2px;
    font-size: 12px;
    cursor: pointer;
}

.u-btn-large {
    min-height: 35px;
    padding: 0 15px;
    line-height: 35px;
    font-size: 14px;
}

.u-btn:disabled {
    background-color: #f5f5f5;
    color: #999;
}

.qr_code_pc_outer {
    width: 183px;
    position: fixed;
    right: 30px;
    bottom: 100px;
    top: 20px;
    color: #717375;
}

.qr_code_pc_inner {
    /*width: 740px;
    margin-left: auto;
    margin-right: auto;*/
}

.qr_code_pc {
    width: 180px;
    padding: 5px;
    background-color: #fff;
    word-wrap: break-word;
    word-break: break-all;
    box-shadow: rgba(30, 30, 30, 0.027451) 2px 4px 16px;
    border: 1px solid rgb(222, 222, 222);
}

    .qr_code_pc p {
        font-size: 14px;
        line-height: 20px;
    }

.right-step-box-title {
    background: #6a7583;
    padding-left: 8px;
    color: white;
    padding: 8px;
}

.ant-steps {
    padding-left: 8px;
    padding-top: 10px;
}

.ant-steps {
    font-size: 0;
    width: 100%;
    line-height: 1.5;
}

    .ant-steps .ant-steps-item {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

        .ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-head-inner {
            border-color: #ccc;
            background-color: #fff;
        }

            .ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-head-inner > .ant-steps-icon {
                color: #ccc;
            }

        .ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-title {
            color: #999;
        }

        .ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-description {
            color: #999;
        }

        .ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-tail > i {
            background-color: #e9e9e9;
        }

        .ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-head-inner {
            border-color: #22a3f4;
            background-color: #22a3f4;
        }

            .ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-head-inner > .ant-steps-icon {
                color: #fff;
            }

        .ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-title {
            color: #666;
        }

        .ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-description {
            color: #666;
        }

        .ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-tail > i {
            background-color: #e9e9e9;
        }

        .ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-head-inner {
            border-color: #22a3f4;
            background-color: #fff;
        }

            .ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-head-inner > .ant-steps-icon {
                color: #22a3f4;
            }

        .ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-tail > i:after {
            width: 100%;
            background: #22a3f4;
            transition: all 0.4s ease;
            opacity: 1;
        }

        .ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-title {
            color: #999;
        }

        .ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-description {
            color: #999;
        }

        .ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-head-inner {
            border-color: #d82821;
            background-color: #fff;
        }

            .ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-head-inner > .ant-steps-icon {
                color: #d82821;
            }

        .ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-title {
            color: #d82821;
        }

        .ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-description {
            color: #d82821;
        }

        .ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-tail > i {
            background-color: #e9e9e9;
        }

        .ant-steps .ant-steps-item.ant-steps-next-error .ant-steps-tail > i,
        .ant-steps .ant-steps-item.ant-steps-next-error .ant-steps-tail > i:after {
            background-color: #d82821;
        }

        .ant-steps .ant-steps-item.ant-steps-custom .ant-steps-head-inner {
            background: none;
            border: 0;
            width: auto;
            height: auto;
        }

            .ant-steps .ant-steps-item.ant-steps-custom .ant-steps-head-inner > .ant-steps-icon {
                font-size: 20px;
                top: 2px;
                width: 20px;
                height: 20px;
            }

        .ant-steps .ant-steps-item.ant-steps-custom.ant-steps-status-process .ant-steps-head-inner > .ant-steps-icon {
            color: #22a3f4;
        }

    .ant-steps .ant-steps-head,
    .ant-steps .ant-steps-main {
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

    .ant-steps .ant-steps-head {
        background: #fff;
    }

    .ant-steps .ant-steps-head-inner {
        display: block;
        border: 1px solid #ccc;
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 26px;
        font-size: 14px;
        margin-right: 8px;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

        .ant-steps .ant-steps-head-inner > .ant-steps-icon {
            line-height: 1;
            color: #22a3f4;
            position: relative;
        }

            .ant-steps .ant-steps-head-inner > .ant-steps-icon.anticon {
                font-size: 12px;
            }

            .ant-steps .ant-steps-head-inner > .ant-steps-icon.anticon-cross,
            .ant-steps .ant-steps-head-inner > .ant-steps-icon.anticon-check {
                font-weight: bold;
            }

    .ant-steps .ant-steps-main {
        margin-top: 2.5px;
    }

    .ant-steps .ant-steps-title {
        font-size: 14px;
        margin-bottom: 4px;
        color: #666;
        font-weight: bold;
        background: #fff;
        display: inline-block;
        padding-right: 10px;
    }

        .ant-steps .ant-steps-title > a:first-child:last-child {
            color: #666;
        }

    .ant-steps .ant-steps-item-last .ant-steps-title {
        padding-right: 0;
        width: 100%;
    }

    .ant-steps .ant-steps-description {
        font-size: 12px;
        color: #999;
    }

    .ant-steps .ant-steps-tail {
        position: absolute;
        left: 0;
        width: 100%;
        top: 13px;
        padding: 0 10px;
    }

        .ant-steps .ant-steps-tail > i {
            display: inline-block;
            vertical-align: top;
            background: #e9e9e9;
            height: 1px;
            border-radius: 1px;
            width: 100%;
            position: relative;
        }

            .ant-steps .ant-steps-tail > i:after {
                position: absolute;
                content: '';
                top: 0;
                width: 0;
                background: #e9e9e9;
                height: 100%;
                opacity: 0;
            }

    .ant-steps.ant-steps-small .ant-steps-head-inner {
        border: 1px solid #ccc;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-radius: 18px;
        font-size: 12px;
        margin-right: 10px;
    }

        .ant-steps.ant-steps-small .ant-steps-head-inner > .ant-steps-icon.anticon {
            display: inline-block;
            font-size: 13px;
            font-size: 9px \9;
            transform: scale(0.69230769) rotate(0deg);
            /* IE6-IE8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
            zoom: 1;
            top: 0;
        }

:root .ant-steps.ant-steps-small .ant-steps-head-inner > .ant-steps-icon.anticon {
    filter: none;
}

:root .ant-steps.ant-steps-small .ant-steps-head-inner > .ant-steps-icon.anticon {
    font-size: 13px;
}

.ant-steps.ant-steps-small .ant-steps-main {
    margin-top: 0;
}

.ant-steps.ant-steps-small .ant-steps-title {
    font-size: 12px;
    margin-bottom: 4px;
    color: #666;
    font-weight: bold;
}

.ant-steps.ant-steps-small .ant-steps-description {
    font-size: 12px;
    color: #999;
}

.ant-steps.ant-steps-small .ant-steps-tail {
    top: 8px;
    padding: 0 8px;
}

    .ant-steps.ant-steps-small .ant-steps-tail > i {
        height: 1px;
        border-radius: 1px;
        width: 100%;
    }

.ant-steps.ant-steps-small .ant-steps-item.ant-steps-custom .ant-steps-head-inner,
.ant-steps .ant-steps-item.ant-steps-custom .ant-steps-head-inner {
    width: inherit;
    height: inherit;
    line-height: inherit;
    border-radius: 0;
    border: 0;
    background: none;
}

.ant-steps-vertical .ant-steps-item {
    display: block;
}

.ant-steps-vertical .ant-steps-tail {
    position: absolute;
    left: 13px;
    top: 0;
    height: 100%;
    width: 1px;
    padding: 30px 0 4px 0;
}

    .ant-steps-vertical .ant-steps-tail > i {
        height: 100%;
        width: 1px;
    }

        .ant-steps-vertical .ant-steps-tail > i:after {
            height: 0;
            width: 100%;
        }

.ant-steps-vertical .ant-steps-status-finish .ant-steps-tail > i:after {
    height: 100%;
}

.ant-steps-vertical .ant-steps-head {
    float: left;
}

.ant-steps-vertical .ant-steps-head-inner {
    margin-right: 16px;
}

.ant-steps-vertical .ant-steps-main {
    min-height: 47px;
    overflow: hidden;
    display: block;
}

    .ant-steps-vertical .ant-steps-main .ant-steps-title {
        line-height: 26px;
    }

    .ant-steps-vertical .ant-steps-main .ant-steps-description {
        padding-bottom: 12px;
    }

.ant-steps-vertical.ant-steps-small .ant-steps-tail {
    position: absolute;
    left: 9px;
    top: 0;
    padding: 22px 0 4px 0;
}

    .ant-steps-vertical.ant-steps-small .ant-steps-tail > i {
        height: 100%;
    }

.ant-steps-vertical.ant-steps-small .ant-steps-title {
    line-height: 18px;
}

.ant-steps-horizontal.ant-steps-hidden {
    visibility: hidden;
}

.ant-steps-horizontal .ant-steps-description {
    max-width: 100px;
}

.ant-steps-horizontal .ant-steps-item:not(:first-child) .ant-steps-head {
    padding-left: 10px;
    margin-left: -10px;
}

.toTop {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 30px;
    bottom: 100px;
    z-index: 19891011;
    box-shadow: 0 0 5px #acacac;
    cursor: pointer;
    border-radius: 50%;
    display: none;
}

    .toTop i {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        text-align: center;
        line-height: 50px;
        color: #22a3f4;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 30px;
    }

.tip_close {
    position: relative;
    top: -3px;
    width: 14px;
    height: 12px;
    color: #22a3f4;
    float: right;
    cursor: pointer;
}

.qr_code_pc_img {
    width: 100px;
    height: 100px;
    margin-left: 32px;
}

.ant-steps-step p {
    width: 100%;
    margin-top: 10px;
    margin-left: 47px;
}

.contains-title input[type='checkbox'] {
    vertical-align: middle;
    margin-right: 5px;
}

.modal-sendMess ul li {
    list-style: none;
    margin: 0 auto;
    width: 250px;
}

    .modal-sendMess ul li label {
        width: 100%;
        margin-bottom: 20px;
    }

.modal-templateList ul li div p {
    margin-bottom: 0;
}

.generateimg {
    float: left;
    padding: 2px 57px;
    cursor: pointer;
}

.rich_media_content {
    float: left;
    padding: 10px 10px 0 10px;
}

    .rich_media_content img {
        float: left;
    }

#targetDom {
    width: 640px;
    float: left;
    background: #fff;
}

#targetDomContent {
    width: 640px;
    float: left;
    background: #fff;
}

.rich_media_title {
    margin-top: 10px;
    margin-left: 10px;
}

@media screen and (max-width:640px) {
    #targetDomContent {
        width: auto;
    }

    #targetDom {
        width: auto;
    }
}

.tips_save {
    font-size: 12px;
    color: red;
    margin-left: 10px;
}

.messageBox .modal-body {
    padding: 0;
    margin-top: 30px;
}

来自：

https://www.jianshu.com/p/6fe06667b748

https://blog.youkuaiyun.com/fenglailea/article/details/56488096

https://blog.youkuaiyun.com/yuemingfuyueming/article/details/76609115