jili2/application/admin/view/address/qrcode.html

{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <div class="text-center">
                    <div id="printer" class="text-center" style="width: 350px;height: 350px;padding-top:20px;margin: 0 auto;text-align: center;">
                        <img src="{:url('Qrcode/qrcode',[],'')}?code={$code}" width="300"  alt="">
                        <p>{$info.title}</p>
                        <p><br></p>
                    </div>
                    <div style="opacity: 0;position: fixed">
                        <div id="printer1" class="text-center" style="width:530px;height:720px;margin: 0 auto;text-align: center;">
                            <img style="
     position: absolute;
    top: 28%;
    left: 21%; " src="{:url('Qrcode/qrcode',[],'')}?code={$code}" width="300"  alt="">
<!--                            <img src="/admin/img/addr.png" width="530"  alt="">-->
                            <p style="
    position: relative;
    font-size: 34px;
    top: -215px;
    color: #0a2c40;
   ">{$info.title}</p>
                            <p><br></p>
                        </div>
                    </div>
                    <a href="javascript:;" class="btn btn-sm btn-primary" onclick="print()">
                        <i class="glyphicon glyphicon-print">打印</i>
                    </a>
                    <a href="javascript:;" class="btn btn-sm btn-primary" onclick="down()">
                        <i class="fa fa-cloud-download">下载</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/browser.js"></script>
<script src="/static/jquery.jqprint-0.3.js"></script>
<script src="/static/html2canvas.min.js"></script>
<script>
    function print(){
        $("#printer").jqprint();
    }
    function down() {
        var canvas2 = document.createElement("canvas");
        let _canvas = document.querySelector('#printer1');
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 4;
        canvas2.height = h * 4;
        canvas2.style.width = w * 4 + "px";
        canvas2.style.height = h * 4 + "px";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        //  var context = canvas.getContext("2d");
        //  context.translate(0,0);
        var rect = $('#printer1').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
        var context = canvas2.getContext("2d");
        context.scale(4, 4);
        //  context.translate(rect.left, -rect.top);
        html2canvas(document.querySelector('#printer1'), {
            // canvas: canvas2,
            //allowTaint : false,
            taintTest: true,
            useCORS: true,
        }).then(function (canvas) {
            var saveFile = function (data, filename) {
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
            //最终文件名
            var filename = '{$info.title}.png';
            saveFile(canvas.toDataURL(), filename);

        });
    }
</script>
{/block}