關於如何使用js 插件實現打印的功能

js插件下載：
jQuery.print.js：

!function(e) {
    "use strict";
    function t(t) {
        var n = e("");
        try {
            n = e(t).clone()
        } catch(r) {
            n = e("<span />").html(t)
        }
        return n
    }
    function n(t, n, r) {
        var o = e.Deferred();
        try {
            var i = (t = t.contentWindow || t.contentDocument || t).document || t.contentDocument || t;
            r.doctype && i.write(r.doctype),
            i.write(n),
            i.close();
            var s = !1,
            c = function() {
                if (!s) {
                    t.focus();
                    try {
                        t.document.execCommand("print", !1, null) || a(t),
                        e("body").focus()
                    } catch(e) {
                        a(t)
                    }
                    t.close(),
                    s = !0,
                    o.resolve()
                }
            };
            e(t).on("load", c),
            setTimeout(c, r.timeout)
        } catch(e) {
            o.reject(e)
        }
        return o
    }
    function r(t, r) {
        var i = e(r.iframe + ""),
        a = i.length;
        return 0 === a && (i = e('<iframe height="0" width="0" border="0" wmode="Opaque"/>').prependTo("body").css({
            position: "absolute",
            top: -999,
            left: -999
        })),
        n(i.get(0), t, r).done(function() {
            setTimeout(function() {
                0 === a && i.remove()
            },
            1e3)
        }).fail(function(e) {
            console.error("Failed to print from iframe", e),
            o(t, r)
        }).always(function() {
            try {
                r.deferred.resolve()
            } catch(e) {
                console.warn("Error notifying deferred", e)
            }
        })
    }
    function o(e, t) {
        return n(window.open(), e, t).always(function() {
            try {
                t.deferred.resolve()
            } catch(e) {
                console.warn("Error notifying deferred", e)
            }
        })
    }
    function i(e) {
        return !! ("object" == typeof Node ? e instanceof Node: e && "object" == typeof e && "number" == typeof e.nodeType && "string" == typeof e.nodeName)
    }
    function a(e) {
        jsPrintSetup ? (jsPrintSetup.setOption("orientation", jsPrintSetup.kPortraitOrientation), jsPrintSetup.setOption("marginTop", 0), jsPrintSetup.setOption("marginBottom", 0), jsPrintSetup.setOption("marginLeft", 0), jsPrintSetup.setOption("marginRight", 0), jsPrintSetup.setOption("headerStrLeft", ""), jsPrintSetup.setOption("headerStrCenter", ""), jsPrintSetup.setOption("headerStrRight", ""), jsPrintSetup.setOption("footerStrLeft", ""), jsPrintSetup.setOption("footerStrCenter", ""), jsPrintSetup.setOption("footerStrRight", ""), jsPrintSetup.setSilentPrint(!0), jsPrintSetup.printWindow(e), setTimeout(function() {
            jsPrintSetup.setSilentPrint(!1)
        },
        500)) : alert("請安裝插件！")
    }
    e.print = e.fn.print = function() {
        var n, a, s = this;
        s instanceof e && (s = s.get(0)),
        i(s) ? (a = e(s), arguments.length > 0 && (n = arguments[0])) : arguments.length > 0 ? i((a = e(arguments[0]))[0]) ? arguments.length > 1 && (n = arguments[1]) : (n = arguments[0], a = e("html")) : a = e("html");
        var c = {
            globalStyles: !0,
            mediaPrint: !1,
            stylesheet: null,
            noPrintSelector: ".no-print",
            iframe: !0,
            append: null,
            prepend: null,
            manuallyCopyFormValues: !0,
            deferred: e.Deferred(),
            timeout: 750,
            title: null,
            doctype: "<!doctype html>"
        };
        n = e.extend({},
        c, n || {});
        var l = e("");
        n.globalStyles ? l = e("style, link, meta, base, title") : n.mediaPrint && (l = e("link[media=print]")),
        n.stylesheet && (l = e.merge(l, e('<link rel="stylesheet" href="' + n.stylesheet + '">')));
        var p = a.clone();
        if ((p = e("<span/>").append(p)).find(n.noPrintSelector).remove(), p.append(l.clone()), n.title) {
            var d = e("title", p);
            0 === d.length && (d = e("<title />"), p.append(d)),
            d.text(n.title)
        }
        p.append(t(n.append)),
        p.prepend(t(n.prepend)),
        n.manuallyCopyFormValues && (p.find("input").each(function() {
            var t = e(this);
            t.is("[type='radio']") || t.is("[type='checkbox']") ? t.prop("checked") && t.attr("checked", "checked") : t.attr("value", t.val())
        }), p.find("select").each(function() {
            e(this).find(":selected").attr("selected", "selected")
        }), p.find("textarea").each(function() {
            var t = e(this);
            t.text(t.val())
        }));
        var u = p.html();
        try {
            n.deferred.notify("generated_markup", u, p)
        } catch(e) {
            console.warn("Error notifying deferred", e)
        }
        if (p.remove(), n.iframe) try {
            r(u, n)
        } catch(e) {
            console.error("Failed to print from iframe", e.stack, e.message),
            o(u, n)
        } else o(u, n);
        return this
    }
} (jQuery);

CSS:

.bill {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 9px
}

.bill table {
    table-layout: fixed
}

.bill tr {
    height: 12px
}

.bill tr:nth-of-type(1) {
    height: 16px
}

.bill tr:nth-of-type(1) td {
    text-align: center;
    font-size: 10px
}

.bill td {
    width: 25%;
    text-align: left
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.bill2 {
    width: 301px;
    margin: 0 auto;
    color: #000;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.bill2 .b-header {
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    margin: 40px 0 30px 0
}

.bill2 .solid-line {
    border: 1px solid #000;
    width: 100%
}

.bill2 .dotted-line {
    width: 100%;
    border: 1px dotted #000
}

.bill2 .b-user {
    padding-bottom: 12px
}

.bill2 .b-unit {
    height: 18px;
    line-height: 18px;
    margin-top: 14px;
    font-size: 16px
}

.bill2 .b-item {
    font-size: 18px;
    min-height: 68px;
    padding: 10px 0;
    position: relative
}

.bill2 .b-item:after {
    content: "";
    clear: both
}

.bill2 .b-item .dotted-line {
    position: absolute
}

.bill2 .b-item .dotted-line.bd-top {
    top: 0
}

.bill2 .b-item .dotted-line.bd-bottom {
    bottom: 0;
    display: none
}

.bill2 .b-item:nth-last-of-type(1) .dotted-line.bd-bottom {
    bottom: 0;
    display: block
}

.bill2 .b-item .item-left {
    display: inline-block;
    width: 65%
}

.bill2 .b-item .item-right {
    display: inline-block;
    width: 35%;
    text-align: right;
    float: right
}

.bill2 .b-money {
    margin-top: 25px;
    padding-bottom: 28px
}

.bill2 .b-address {
    margin-top: 9px
}

.bill2 .welcome {
    margin-top: 28px;
    font-size: 25px;
    color: #000;
    text-align: center;
    font-weight: 700
}

.bill3 {
    width: 301px;
    margin: 0 auto;
    color: #000;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.bill3 .b-header {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin: 45px 0 30px 0
}

.bill3 p.time {
    margin-top: 17px;
    margin-bottom: 12px;
    font-size: 16px;
    text-align: center
}

.bill3 .solid-line {
    border: 1px solid #000;
    width: 100%
}

.bill3 .dotted-line {
    border: 1px dotted #000;
    display: block
}

.bill3 .b-user {
    padding-bottom: 12px
}

.bill3 .b-unit {
    height: 18px;
    line-height: 18px;
    margin-top: 14px;
    font-size: 16px
}

.bill3 .b-byj {
    float: right
}

.bill3 .b-left {
    float: left
}

.bill3 .b-right {
    float: right
}

.bill3 .zhifu {
    margin-top: 24px;
    margin-bottom: 24px
}

.bill3 .zf-item {
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    position: relative;
    padding: 0 14px
}

.bill3 .zf-item:after {
    content: "";
    clear: both
}

.bill3 .zf-item .dotted-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto
}

.bill3 .zf-item:nth-last-of-type(1) .dotted-line.bd-bottom {
    bottom: 0;
    display: block
}

.bill3 .zf-item .item-left {
    display: inline-block;
    width: 65%
}

.bill3 .zf-item .item-right {
    display: inline-block;
    width: 35%;
    text-align: right;
    float: right
}

.bill3 .b-total {
    margin-top: 30px;
    height: 121px
}

.bill3 .b-total:after {
    content: "";
    clear: both
}

.bill3 .b-total div:nth-of-type(1) {
    width: 50%
}

.bill3 .b-total div:nth-of-type(2) {
    width: 50%
}

.bill3 .b-total .mingmu {
    font-size: 15px
}

.bill3 .b-total .m-val {
    font-size: 20px;
    font-weight: 700;
    text-align: center
}

function printme()
        {
            $("#storeBill").show();
            for(var i=0;i<3;i++){
            $("#storeBill").print({
                       //title:"店鋪xx"
            });
            }
            $("#storeBill").hide();
        }

<div id='storeBill' class="bill2" style="display: none">
        <div class="b-header">店鋪    ${orderInfoDTO.storeName}</div>
        <div class="solid-line"></div>
        <div class="b-user">
            <div class="b-unit">訂單編碼：${orderInfoDTO.orderCode}</div>
            <div class="b-unit">機器編號：${userBean.posCode}</div>
            <div class="b-unit">收銀員：<#if userBean ??>
                                        ${userBean.userName}(${userBean.userId})
                                        </#if>
            </div>
            <div class="b-unit">營業員：${orderInfoDTO.userName}</div>
            <div class="b-unit">會員號：${orderInfoDTO.buyerName}(${orderInfoDTO.buyerPhone})</div>
            <div class="b-unit">${orderInfoDTO.paidTime}</div>
        </div>

        <div class="items">
            <#if orderInfoDTO.orderItem?exists >
              <#list orderInfoDTO.orderItem as orderItem> 
                <div class="b-item">
                    <div class="dotted-line bd-top"></div>
                    <div class="dotted-line bd-bottom"></div>
                        <div class="item-left">
                           ${orderItem.cmmdtyName}
                        </div>
                    <div class="item-right">
                        <div>${orderItem.unitPrice?number?string("0.00")}×${orderItem.quantity}</div>
                        <div>${((orderItem.unitPrice?number)*(orderItem.quantity?number))?number?string("0.00")}</div>
                    </div>
                </div>
              </#list>
            </#if>
        </div>

        <div class="b-money">
            <div class="b-unit">優惠金額：${orderInfoDTO.discountAmount?number?string("0.00")}</div>
            <div class="b-unit">應付金額：${orderInfoDTO.payAmount?number?string("0.00")}</div>
            <div class="b-unit">實收金額：${orderInfoDTO.paidAmount?number?string("0.00")}</div>
            <#if orderInfoDTO.payInfo?exists>
            <#list orderInfoDTO.payInfo as payInfo>
            <div class="b-unit">
            <#if payInfo.payType == "1"> 現金 ：
            <#elseif payInfo.payType =="2"> 支付寶 ：
            <#elseif payInfo.payType =="4"> 銀行卡 ：
            <#elseif payInfo.payType =="5"> 微信 ：
            </#if>#{((payInfo.payAmount)?number); m2M2}</div>
            </#list>
            </#if>
        </div>


        <div class="welcome">歡迎光臨，謝謝惠顧！</div>
    </div>

關於如何使用js 插件實現打印的功能

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

關於登陸的配置問題總結

常用用法

Excel批量導入導出功能開發

網頁端生成二維碼的實現方式

關於如何使用js 插件實現打印的功能

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結