【2020-05-08】使用html2canvas实现网页保存为图片并打印

2020年5月8日23:30:37 发表评论 411 热度

先使用html2canvas生成canvas,再使用canvas2image生成图片,用新窗口打开并自动打印图片

{include file="common/head"/}
<style type="text/css">
*{font-weight: 700;}
    .A4{width: 794px;height: 1090px;margin-top: 5px;padding-top: 5px;background-color: #fff;}
    .card_div{height:23%;padding: 5px;}
    .card_content{border: 1px solid #000;height: 100%;position: relative;}
    .card_content h2{font-size: 15px;font-weight: 700;display: inline-block;margin-left: 17px;}
    .card_content ul{padding-top: 7px;padding-left: 30px;}
    .card_content ul li {padding-top: 3px;}
    .logo_img{width: 35px;display: inline-block;}
    .headimg{width:100px;height:130px;position: absolute;right: 10px;top: 50px;}
    .item_key{color: rgb(114,169,217);}
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>打印预览</legend>
    </fieldset>
    <button type="button" class="layui-btn layui-btn-success" id="print" onclick="print_out()">打印</button>

    <a href="{:url('goods/index')}"><button type="button" class="layui-btn layui-btn-danger">返回列表</button></a>
    <!-- A4纸张宽高 -->
   <div id="print_a4" class="A4 layui-row">
        {volist name="user_list" id="vo"}
            <div class="card_div layui-col-xs6">
               <div class="card_content">
                <div style="margin-left: 25px;"><img class="logo_img" src="/static/admin/images/logo.png" alt="【2020-05-08】使用html2canvas实现网页保存为图片并打印"><h2>食品从业人员健康体检合格证</h2></div>
                <ul>
                    <li><span class="item_key">编号:</span>{$vo.idcard}</li>
                    <li><span class="item_key">姓名:</span>{$vo.name}  <span class="item_key">性别:</span>{$vo.sex}   <span class="item_key">年龄:</span>{$vo.age} 岁</li>
                    <li><span class="item_key">体检合格:</span>{$vo.is_hege}</li>
                    <li><span class="item_key">工作单位:</span>{$vo.address}</li>
                    <li><span class="item_key">主检医师:</span>{$vo.doctor}</li>
                    <li><span class="item_key">体检单位:</span>{$vo.hospital}</li>
                    <li><span class="item_key">有效期至:</span><u>{$vo.end_time}</u></li>

                </ul>
                <img class="headimg" src="{$vo.headimg}">
               </div>
            </div>
        {/volist}
   </div>
   <div id="print_img_div">
       <img id="print_img" src="">

   </div>
</div>
{include file="common/foot"/}
<link rel="stylesheet" type="text/css" href="/static/admin/css/formSelects-v4.css"/>
<script src="/static/admin/js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/print.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="/static/admin/js/canvas2image.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//     function print_out(){
//         new html2canvas(document.getElementById('print_a4'),{scale: 6,dpi: window.devicePixelRatio*2,}).then(canvas => {
//             // canvas为转换后的Canvas对象
//             let oImg = new Image();
//             var scale = 2; 

//     canvas.width = 794 * scale; 
//     canvas.height = 1090 * scale; 
//     canvas.getContext("2d").scale(scale, scale); 

//             oImg.src = canvas.toDataURL();  // 导出图片
//             //document.body.appendChild(oImg);  // 将生成的图片添加到body

//             //window.open(oImg.src)
//             $("#print_img").attr('src',oImg.src)
//             var printHtml=$('#print_img_div').html(),
//           newWindow = window.open("",'newwindow');
//    newWindow.document.body.innerHTML = printHtml;
//    newWindow.print();
//           });
//     }
//     
    function print_out(){
        var shareContent = document.getElementById('print_a4'); 
        var width = shareContent.offsetWidth+10; 
        var height = shareContent.offsetHeight+50; 
        var canvas = document.createElement("canvas"); 
        var scale = 2.5; 

        canvas.width = width * scale; 
        canvas.height = height * scale; 
        canvas.getContext("2d").scale(scale, scale); 

        var opts = {
            scale: scale, 
            canvas: canvas, 
            logging: true, 
            width: width, 
            height: height 
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            var context = canvas.getContext('2d');

            var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

            document.body.appendChild(img);
            $(img).css({
                "width": canvas.width / 2.5 + "px",
                "height": canvas.height / 2.5 + "px",
            })
            $("#print_img").css({
                "width": canvas.width / 2.5 + "px",
                "height": canvas.height / 2.5 + "px",
            })

            $("#print_img").attr('src',img.src)
             var printHtml=$('#print_img_div').html(),
            newWindow = window.open("",'newwindow');
            newWindow.document.body.innerHTML = printHtml;
             newWindow.print();
        });
    }

</script>
</body>
</html>

最终可实现打印部分网页的效果

【2020-05-08】使用html2canvas实现网页保存为图片并打印

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: