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快递单排版，支持右键保存图片相关推荐

分享支持一站式查快递单号查询物流信息
电商的兴起,使用快递的频率越来越高,做线上的都需要用到快递,而且快递物流的查询也是一个问题.为了提高工作效率,现在大家都用上批量查快递查物流的方法.所以接下来给大家介绍这款支持批量查快递的工具--快递 ...
支持批量查询中通快递单号的推荐软件
中通快递单号可以一次性查询吗?为了方便用户查询快递物流信息,今天小编就跟大家分享一款辅助软件:"固乔快递查询助手",它可以为用户提供中通快递物流单号的一次性查询功能,下面为大家分享 ...
查快递单号物流信息查询，支持多家快递
快递在我们日常生活中是非常常见的,那么在查询快递物流的时候,如果在单号多的情况下,一般会选择什么样的技巧去快速查询呢?今天小编给大家分享一个新的技巧,下面随小编一起来试试. 所需工具安装一个快递批量 ...
快速查询每个快递单号物流详情，支持国内常用的快递公司
当你拥有多个快递单号的时候,还会在官网一个个查询吗?NONONO,很多人都在用新技巧快速查询物流并进行分析了,下面一起来学习一下. 材料准备: 一台Win系统的电脑快递批量查询高手(注册介绍人填:与 ...
支持多个快递单号物流快速查询的方法
查询快递这种重要的事,大家都是如何查询大量的快递单号呢?下面分享一个快速批量查询的工具,一键查询多个快递单号物流,来看操作步骤吧. 从浏览器上打开电脑软件站,下载快递批量查询高手到电脑上下载好后,打 ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
个人永久性免费-Excel催化剂功能第97波-快递单号批量查询物流信息
电商时代,快递已进千万家,做电商零售行业的,快递信息的再挖掘,也显得更有意义,是数据精细化运营中必不可少的一环. 一般站在系统的角度,数据用于业务流转的增删改查使用,而对于分析需求来说,这些业务系统里 ...
php批量打印快递单,excel怎么利用vba实现批量套打快递单批量打印单据?
excel vba 批量套打快递单,批量打印单据,可以自定义修改设置新的格式. 快递套打模板2015:点击下载 1.设置快递单的自定义纸张.选择对应打印机-点击打印服务器属性-勾选创建新表单-输入表单 ...
Day03『NLP打卡营』实践课3：使用预训练模型实现快递单信息抽取
Day03 词法分析作业辅导本教程旨在辅导同学如何完成 AI Studio课程--『NLP打卡营』实践课3:使用预训练模型实现快递单信息抽取课后作业. 1. 更换预训练模型在PaddleNLP ...

html快递单排版，支持右键保存图片

html快递单排版，支持右键保存图片相关推荐

最新文章

热门文章