html快遞單排版，支持右鍵保存圖片

JsBarcode 條形碼
html2canvas 、canvas2image 轉圖片
<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <div class="print-container" style="border: 1px solid #000;width: 350px;height: 650px;">
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            :root {
                --w: 350px;
                --h: 650px;
            }

            .print-container * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "黑體"
            }

            .clear::after {
                content: "";
                display: block;
                visibility: hidden;
                height: 0;
                clear: both;
            }

            .print-container ul {
                margin-left: calc(var(--w)/100*2);
            }

            .print-container li {
                list-style: none;
                float: left;
                width: calc(var(--w)/100*12);
                height: calc(var(--h)/180*12);
                border: 1px solid #d9d9d9;
                border-bottom: none;
                font-weight: bold;
                text-align: center;
            }

            .print-container ul {
                margin-top: calc(var(--h)/180*2);
            }

            .print-container li:first-of-type {
                border: none;
                width: calc(var(--w)/100*32);
            }

            .print-container li:nth-of-type(2) {
                line-height: calc(var(--h)/180*12);
            }

            .print-container li:nth-last-of-type(2) {
                width: calc(var(--w)/100*20);
            }

            .print-container li:last-of-type {
                width: calc(var(--w)/100*20);
            }

            .print-container li img {
                width: calc(var(--w)/100*28);
                /* sf */
                /* float: left; */
                /**db**/
                margin-top: calc(var(--w)/180*3);
            }

            .print-container li:not(:last-child) {
                border-right: none;
            }

            .print-container section {
                width: 96%;
                margin-left: calc(var(--w)/100*2);
                height: calc(var(--h)/180*15);
                border: 1px solid #d9d9d9;
            }

            .print-container section:first-of-type {
                line-height: calc(var(--h)/180*15-10);
                font-size: 40px;
                text-align: center;
                font-weight: bold;
            }

            .print-container .order_top section:nth-of-type(3) {
                height: calc(var(--h)/180*13.5);
            }

            .print-container .order_top section:nth-of-type(4) {
                height: calc(var(--h)/180*21.5);
            }

            .print-container .order_top section:nth-of-type(5) {
                height: calc(var(--h)/180*20);
            }

            .print-container .order_top section:nth-of-type(6) {
                height: calc(var(--h)/180*9);
            }

            .print-container .order_top section:not(:last-child) {
                border-bottom: none;
            }

            .order_top {
                margin-bottom: calc(var(--h)/180*2);
            }

            .print-container .section_5 article,
            .print-container .section_6 article {
                float: left;
            }

            .print-container .section_5 article:first-of-type {
                width: calc(var(--w)/100*76);
                height: 100%;
                border-right: 1px solid #d9d9d9;
            }

            .print-container .section_5 article:last-of-type {
                width: calc(var(--w)/100*19);
                height: 100%;
                line-height: calc(var(--h)/180*20);
            }

            .print-container .section_6 article:first-of-type {
                width: 168px;
                height: 100%;
                border-right: 1px solid #d9d9d9;
            }

            .print-container .section_6 article:last-of-type {
                width: 166px;
                height: 100%;
            }

            .print-container .order_bottom {
                padding-top: calc(var(--h)/180*2);
                border-top: 1px dashed #d9d9d9;
            }

            .print-container .order_bottom section:not(:last-child) {
                border-bottom: none;
            }

            .print-container .order_bottom section:first-of-type {
                position: relative;
                border: none;
                height: calc(var(--h)/180*8);
            }

            .print-container .order_bottom section:first-of-type img:first-of-type {
                position: absolute;
                /* sf */
                /* left: calc(var(--w)/100*1);
                top: calc(var(--w)/-180*2.5);
                width: calc(var(--w)/100*20); */
                /* db */
                left: calc(var(--w)/100*2);
                top: calc(var(--w)/-180);
                width: calc(var(--w)/100*28);
            }

            .print-container .order_bottom section:nth-of-type(2),
            .print-container .order_bottom section:nth-of-type(3) {
                height: calc(var(--h)/180*9);
            }

            .print-container .order_bottom section:nth-of-type(3) {
                border-bottom: 1px solid #d9d9d9;
            }

            .print-container .order_bottom section:nth-of-type(4) {
                width: 100%;
                height: calc(var(--h)/180*2);
                margin-left: 0;
                border: none;
                border-bottom: 1px dashed #d9d9d9;
                margin-bottom: calc(var(--h)/180*2);
            }

            .print-container .order_bottom section:last-of-type {
                height: calc(var(--h)/180*36);
            }
        </style>
        <div class="order_top">
            <ul class="clear">
                <li><img src="/image/download.png" /></li>
                <li style="font-size: 17px;">到付</li>
                <li>報價</br><span style="font-size: 12px">¥1200</span></li>
                <li>代收貨款</br><span style="font-size: 12px">¥1200</span></li>
                <li>簽收返單</br><span style="font-size: 12px">原件返回</span></li>
            </ul>
            <section>河南鄭州</section>
            <section>
                <img src="/image/revice.png" style="float:left;padding: 12px 10px 0 3px" />
                <article style="font-size: 14px;font-weight: bold;">
                    <p style="font-size: 12px;margin-bottom: 1px;">張翼飛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;135****1525</p>
                    <p style="line-height: 16px;display: inline-block;width: 88%;">山西省長治市沁縣沁州南路沁縣沁州南路沁州花苑小區 852號</p>
                </article>
            </section>
            <section>
                <span style="float:left;padding: 10px 15px 0px 8px;font-weight: bold;">寄</span>
                <article style="font-size: 12px;display: inline-block;width: 88%;">
                    <p style="margin-bottom: 1px;">張翼飛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;135****1525</p>
                    <p style="line-height: 16px">山西省長治市沁縣沁州南路沁縣沁州南路沁州花苑小區 852號</p>
                </article>
            </section>
            <section style="text-align: center;"><img id="barcode"></section>
            <section class="section_5 clear">
                <article style="font-size: 12px;line-height: 13px;padding: 1px;position: relative;">
                    快件送達收件人地址，經收件人或收件人（寄件人）允許 的代收人簽字，視爲送達。您的簽字代表您已經簽收此包 裹，並已確定商品信息無損，包裝完好、沒有劃痕、破損 等表面質量問題。
                    <span style="position:absolute;bottom:1px;right: 1px;">簽收欄</span>
                </article>
                <article style="font-size: 16px;font-weight: bold;text-align: center;">已驗視</article>
            </section>
            <section class="section_6 clear" style="text-align: center;font-size: 14px;line-height: 14px;">
                <article style="padding-top: 2px;">重泡比已備案<br />8000</article>
                <article style="padding-top: 2px;">始髮網點<br />上海青浦區練塘營業部</article>
            </section>
        </div>
        <div class="order_bottom">
            <section class="clear">
                <img src="/image/download.png" />
                <img id="barcode1" style="position: absolute;right: 2px;top: 1px;width: 56%;">
            </section>
            <section>
                <img src="/image/revice.png" style="float:left;padding: 2px 10px 0px 4px; width: 35px;margin-left: 4px;" />
                <article style="font-size: 12px;display: inline-block;width: 88%;">
                    <p style="font-size: 12px;margin-bottom: 1px;">張翼飛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;135****1525</p>
                    <p style="line-height: 16px;display: inline-block;width: 88%;">山西省長治市沁縣沁州南路沁州花苑小區 852號</p>
                </article>
            </section>
            <section>
                <span style="float:left;padding: 4px 15px 0px 8px;font-weight: bold;">寄</span>
                <article style="font-size: 12px;display: inline-block;width: 88%;">
                    <p style="margin-bottom: 1px;">張翼飛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;135****1525</p>
                    <p style="line-height: 16px">山西省長治市沁縣沁州南沁州花苑小區 852號</p>
                </article>
            </section>
            <section></section>
            <section></section>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js "></script>
<script src="https://cdn.bootcss.com/jQuery.print/1.6.0/jQuery.print.min.js "></script>
<script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js "></script>
<script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script>
    var str = "70000000000010026 ";
    JsBarcode("#barcode", str, {
        width: 2,
        format: "CODE128",
        displayValue: true,
        fontSize: 14,
        height: 40,
        textMargin: 1, //設置條形碼和文本之間的間距
    }); //原生
    JsBarcode("#barcode1", str, {
        width: 2,
        format: "CODE128",
        displayValue: true,
        fontSize: 14,
        height: 30,
        textMargin: 0, //設置條形碼和文本之間的間距
        margin: 0
    }); //原生
    var canvas = document.createElement("canvas");
    var scale = 4,
        width = 352,
        height = 652;
    canvas.width = width * scale;
    canvas.height = height * scale;
    canvas.getContext("2d").scale(scale, scale);
    html2canvas(document.body, {
        background: '#fff',
        scale: scale,
        canvas: canvas,
        logging: true,
        width: width,
        height: height
    }).then(function(canvas) {
        var context = canvas.getContext('2d');
        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
        document.body.appendChild(img);

        img.onload = function() {
            $(".print-container").hide();
        };
    });
</script>

</html>
html快遞單排版，支持右鍵保存圖片

高效率使用windows

js 移動端H5 定位獲取當前城市

js 彈窗彈出+關閉+拖動效果

workflow仿釘釘審批流程設置

js表單頁面退出或刷新時，如何觸發事件保存表單內容

button內部放置 input file360瀏覽器下點擊沒反應

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

linux以太網驅動總結
