因为项目需要,需要做个打印产品发货明细。
之所以找到这个是因为看了好多大佬的推荐,这个插件不错
以下是官网:http://www.c-lodop.com/LodopDemo.html
一开始在官网找了好久,发现没有图片和表格一起打印的,就自己去试试
领导给我的是一个excel,里面放了大概是这样的
当然图片不是这个,为了隐私问题,特意找了自己的账号截图
思路:
1.我没有去找相关找打印excel的是因为我要往表格动态填数据非常麻烦【其实也不是很麻烦】,我就想到,把这个excel的模板弄成网页,用table展示就行了
2.对比打印的属性[https://www.cnblogs.com/huaxie/p/10212656.html]
ADD_PRINT_TABLE 特点:不切行,只能输出一个table,嵌套复杂等表格不行。
当某一行高超过打印项高度时,不会按照打印项高度分页,不切行,而是输出整个行,行跨页隐藏后面的内容,不会分到下一页。
如图-----达到了纸张的最下方,下面既没有表格线,后面的内容也没有分到下一页,该超大行后面的内容相当于不打印隐藏了。
ADD_PRINT_HTM特点:切行没切字,补充了表格线,该超大行分页后成了多行。
如图-----基本按照打印设计打印项高度分页,只是打印设计里高度在最后一句,打印设计设计的高度是稍稍小于该文字的,但是ADD_PRINT_HTM没有切字,而是把最后一行字显示全了,并且该大行分页后补全了表格线,本来是两行三列的表格,补完横线后,看起来是两行变成了四行,切行的都补了线。
ADD_PRINT_HTML特点:切行切字,不补表格线,类似截图,把内容当图截了。
我自己也去对比测试了,我最后选用了ADD_PRINT_HTM
遇到的坑:
1.因为我公司的打印机有两个几盒,对应的纸盒纸张不一样,一开始打印的时候,老是不对劲,因为默认选择纸盒1,纸盒1的纸张不是A4。
调整 LODOP.PRINT_DEFAULTSOURCE = 7;7表示自动选择
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, “A4”); //1竖版 2横版 A4纸是横版还是竖版打印
2.调整纸张位置
LODOP.ADD_PRINT_HTM(0, 0, ‘100%’, ‘100%’, document.getElementById(“tableJY”).innerHTML);
<!DOCTYPE html>
<html lang="zh-cn"">
<head>
<meta charset=" UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>寄样清单</title>
<style>
.table-box {
display: inline-block;
}
.table-body table {
width: 100%;
}
td {
max-width: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-box">
<div class="table-header">
<img src="./img/img_header.png">
</div>
<div class="table-body">
<h2 style="text-align: center; border-top: 2px solid black;padding-top: 10px;">寄样清单</h2>
<table cellspacing="15">
<tr>
<th>客户名称:</th>
<td>庄严贸易有限公司</td>
<th>联系人:</th>
<td>牛女士</td>
<th>寄样日期:</th>
<td>2020/9/13</td>
</tr>
<tr>
<th>客户地址:</th>
<td>广东省广州市白云区YH城</td>
<th>联系电话:</th>
<td>18326913045</td>
<th>是否收费:</th>
<td>否</td>
</tr>
</table>
<table border="1" cellspacing="0">
<tr>
<th>序号</th>
<th>系列名称</th>
<th>属性</th>
<th>规格</th>
<th>配方编码</th>
<th>数量</th>
<th>功效简介</th>
</tr>
<tr>
<td>1</td>
<td>微雕紧塑逆龄方案</td>
<td>冻干类</td>
<td>40mg×10/板</td>
<td>VS-07</td>
<td>1</td>
<td>7天明显见效!全方位淡纹、紧致、实现逆龄养护!
紧致嫩肤效果明显!</td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table cellspacing="15">
<tr>
<td style="text-align: left;">总办:</td>
<td style="text-align: left;">财务:</td>
<td style="text-align: left;">业务:</td>
</tr>
</table>
</div>
</div>
</body>
<script>
var LODOP; //声明为全局变量
function prn2_preview() {
LODOP = getLodop();
LODOP.PRINT_INIT("");
LODOP.PRINT_DEFAULTSOURCE = 7;//选择打印机的纸盒
LODOP.PRINT_INITA(0, 0, '100%', '100%', "");
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //A4纸 1竖版 2横版
LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', document.getElementById("tableJY").innerHTML);
LODOP.PRINT_DESIGN();
// LODOP.PRINTA();
//LODOP.PREVIEW();
};
</script>
</html>
以上就是打印的前端页面的代码,非常赞,感谢大佬的分享,让我少走了很多弯路