- 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;">张翼飞 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;">张翼飞 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;">张翼飞 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;">张翼飞 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>
